alert if marker is outside the polygon

Jhun Woo Source

I am currently developing a web application that would alert if a systems generated marker is outside a polygon, but my function is only working in 1 polygon, it does not work in other polygon. Is there something wrong in my loop or what did i miss ?

See image here: sample image

Here is my function.

function checkInPolygon(marker) {
  var infowindow = new google.maps.InfoWindow();

  for (var x = 0; x < mpa_polygon.length; x++) {
    var html = google.maps.geometry.poly.containsLocation(marker.getPosition(), mpa_polygon[x]) ? 'inside' : 'outside';
  infowindow.setContent(html);, marker);

Full code implementation:

function displaySalesMan() {
  var names = [];
  var ids = [];
  var dateMPA = [];
  var longlat = [];
  var header = [];
  var loc = [
  var newdata = [];

    url: "/geofencing/GeofencingAPI.php",
    type: "GET",
    data: {
      "type": "view_salesmanDashboard_gensan_COLOR",
      "filter_Date": getDate()
    dataType: "html",
    crossDomain: true,
    cache: false,
    success: function(response) {
      var data = JSON.parse(response);
      if (response == 'No records are generated on selected salesman and date!') {
        alert('No records are found in selected date!');
      } else {
        for (var x = 0; x < data.length; x++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(data[x].latitude, data[x].longitude),
            map: map,
            icon: '|' + data[x].TERRCOLOR.substr(1)

          i call the
          function here with a parameter ** marker **


          google.maps.event.addListener(marker, 'click', (function(marker, x) {
            return function() {
              var contentString = "<div style='overflow: hidden; margin: 0 auto;'><div class='modal-header' style='text-align: center;'><div class=''><img style='height: 120px; width:120px;' alt='salesmanPic' src='img/jomar.png'></div></div>" +
                "<div class='table-responsive'>" +
                "<table class='table table-condensed'>" +
                "<tr><td>Salesman:</td><td class='bold'>" + data[x].Salesman + "</td></tr>" +
                "<tr><td>Customer:</td><td>" + data[x].Customer + "</td></tr>" +
                "<tr><td>Location:</td><td>" + data[x].longitude + ' ' + data[x].latitude + "</td></tr>" +
                "<tr><td>Delivery Date:</td><td>" + data[x].deliveryDate + "</td></tr>" +
                "</table>" +
                "</div>" +
    , marker);

          })(marker, x));

        } //end for

      } //else
    } //on succjess
  }) //ajax close tag

  //checkerForSalesman(markers, mpa_polygon);
  infoWindow = new google.maps.InfoWindow;

} //display salesman funciton


answered 6 months ago betofarina #1

From what I understood of your code, for each marker you going to ask "is this in first polygon? yes o no" then you insert the answer in the infowindow of that marker...then going to ask for the same marker "is this in the second polygon? yes o no" and so on, always overwriting the previous answer for the previous polygon....that is why it only works for the last polygon inserted.

So the solution here would be find a way to keep separate answers for each polygon, or select which polygon are you aiming.

To be clear if a marker which is only one point, can only have 2 posibles states (true or false) and you have 3 polygons..that breaks the equation. cause for instance in the image you provided, all the markers shows good results if your reference is the red polygon...but you need to know which of the 3 polygons you are referring to.

Hope it makes sense

comments powered by Disqus