get multiple polygons in google maps API

Question

I am using google maps API for searching houses in different places in a city. All the houses will be having markers and user will draw multiple polygons around the markers based on his interest.

I need to check what all the locations user selected and show only those markers in maps. With my code, I am able to get it done, but struck with some issue

Once user draw first polygon, I am storing that in a variable and then merging it with the coordinates of second polygon and repeating the same for all the polygons. So, all the polygons coordinates are in a single object. Whenever I draw multiple polygons all of them are getting connected with a polyline because I am saving them in one object and sending that to mapOptions.

How to get rid of this issue?? Following is the code, I am using when user draws a polygon. I want all the polygons to be independent to each-other

function drawFreeHand(){
    //the polygon
    poly = new google.maps.Polyline({map:map,clickable:false});

    //move-listener
    var move = google.maps.event.addListener(map,'mousemove',function(e){
        poly.getPath().push(e.latLng);
    });

    //mouseup-listener 
    google.maps.event.addListenerOnce(map,'mouseup',function(e){
        google.maps.event.removeListener(move);

        var path = poly.getPath();
        poly.setMap(null);

        var theArrayofLatLng = path.j;

        var ArrayforPolygontoUse = GDouglasPeucker(theArrayofLatLng,50); 
        multi_poly = myFunction1(ArrayforPolygontoUse)
        console.log(multi_poly);

        var polyOptions = {
            map: map,
            fillColor: '#0099FF',
            fillOpacity: 0.7,
            strokeColor: '#AA2143',
            strokeWeight: 2,
            clickable: false,
            zIndex: 1,
            path:multi_poly,
            editable: false
        }

        poly = new google.maps.Polygon(polyOptions);
    });
}

function myFunction1(myVar) {
    if(ArrayforPolygontoUse != undefined) {
        str1 = ArrayforPolygontoUse;
    }
    else { 
        var str1 = []; 
    }
    return  ArrayforPolygontoUse = $.merge(str1,myVar);
}

Answer 1

A polygon can take an array of arrays of google.maps.LatLng objects. That is what you want to do if you want to keep the paths separate.

function drawFreeHand(){
    //the polygon
    poly = new google.maps.Polyline({map:map,clickable:false});

    //move-listener
    var move = google.maps.event.addListener(map,'mousemove',function(e){
        poly.getPath().push(e.latLng);
    });

    //mouseup-listener 
    google.maps.event.addListenerOnce(map,'mouseup',function(e){
        google.maps.event.removeListener(move);

        var path = poly.getPath();
        poly.setMap(null);

        var theArrayofLatLng = path.getArray();

        var ArrayforPolygontoUse = GDouglasPeucker(theArrayofLatLng,50); 
        if (poly && poly.getPaths) { 
            // if already has one or more paths, get the existing paths
            multi_poly = poly.getPaths();
            multi_poly_path.push(ArrayforPolygontoUse);
        } else {
            // first path
            multi_poly = ArrayforPolygontoUse;
        }

        var polyOptions = {
            map: map,
            fillColor: '#0099FF',
            fillOpacity: 0.7,
            strokeColor: '#AA2143',
            strokeWeight: 2,
            clickable: false,
            zIndex: 1,
            paths:multi_poly,
            editable: false
        }

        poly = new google.maps.Polygon(polyOptions);
    });
}

proof of concept fiddle

code snippet:

var geocoder;
var map;
var ArrayforPolygontoUse = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListener(map, 'rightclick', drawFreeHand);
}
google.maps.event.addDomListener(window, "load", initialize);

function drawFreeHand() {
  //the polygon
  poly = new google.maps.Polyline({
    map: map,
    clickable: false
  });

  //move-listener
  var move = google.maps.event.addListener(map, 'mousemove', function(e) {
    poly.getPath().push(e.latLng);
  });

  //mouseup-listener 
  google.maps.event.addListenerOnce(map, 'mouseup', function(e) {
    google.maps.event.removeListener(move);

    var path = poly.getPath();
    poly.setMap(null);

    var theArrayofLatLng = path.getArray();

    var ArrayforPolygontoUse = GDouglasPeucker(theArrayofLatLng, 50);
    if (poly && poly.getPaths) {
      multi_poly = poly.getPaths();
      multi_poly_path.push(ArrayforPolygontoUse);
    } else {
      multi_poly = ArrayforPolygontoUse;
    }

    // multi_poly = myFunction1(ArrayforPolygontoUse)
    // console.log(multi_poly);

    var polyOptions = {
      map: map,
      fillColor: '#0099FF',
      fillOpacity: 0.7,
      strokeColor: '#AA2143',
      strokeWeight: 2,
      clickable: false,
      zIndex: 1,
      paths: multi_poly,
      editable: false
    }

    poly = new google.maps.Polygon(polyOptions);
  });
}


// from http://stackoverflow.com/questions/16121236/smoothing-gps-tracked-route-coordinates

/* Stack-based Douglas Peucker line simplification routine 
   returned is a reduced google.maps.LatLng array 
   After code by  Dr. Gary J. Robinson,
   Environmental Systems Science Centre,
   University of Reading, Reading, UK
*/

function GDouglasPeucker(source, kink)
  /* source[] Input coordinates in google.maps.LatLngs    */
  /* kink in metres, kinks above this depth kept  */
  /* kink depth is the height of the triangle abc where a-b and b-c are two consecutive line segments */
  {
    var n_source, n_stack, n_dest, start, end, i, sig;
    var dev_sqr, max_dev_sqr, band_sqr;
    var x12, y12, d12, x13, y13, d13, x23, y23, d23;
    var F = ((Math.PI / 180.0) * 0.5);
    var index = new Array(); /* aray of indexes of source points to include in the reduced line */
    var sig_start = new Array(); /* indices of start & end of working section */
    var sig_end = new Array();

    /* check for simple cases */

    if (source.length < 3) return (source); /* one or two points */

    /* more complex case. initialize stack */

    n_source = source.length;
    band_sqr = kink * 360.0 / (2.0 * Math.PI * 6378137.0); /* Now in degrees */
    band_sqr *= band_sqr;
    n_dest = 0;
    sig_start[0] = 0;
    sig_end[0] = n_source - 1;
    n_stack = 1;

    /* while the stack is not empty  ... */
    while (n_stack > 0) {

      /* ... pop the top-most entries off the stacks */

      start = sig_start[n_stack - 1];
      end = sig_end[n_stack - 1];
      n_stack--;

      if ((end - start) > 1) { /* any intermediate points ? */

        /* ... yes, so find most deviant intermediate point to
                   either side of line joining start & end points */

        x12 = (source[end].lng() - source[start].lng());
        y12 = (source[end].lat() - source[start].lat());
        if (Math.abs(x12) > 180.0) x12 = 360.0 - Math.abs(x12);
        x12 *= Math.cos(F * (source[end].lat() + source[start].lat())); /* use avg lat to reduce lng */
        d12 = (x12 * x12) + (y12 * y12);

        for (i = start + 1, sig = start, max_dev_sqr = -1.0; i < end; i++) {

          x13 = (source[i].lng() - source[start].lng());
          y13 = (source[i].lat() - source[start].lat());
          if (Math.abs(x13) > 180.0) x13 = 360.0 - Math.abs(x13);
          x13 *= Math.cos(F * (source[i].lat() + source[start].lat()));
          d13 = (x13 * x13) + (y13 * y13);

          x23 = (source[i].lng() - source[end].lng());
          y23 = (source[i].lat() - source[end].lat());
          if (Math.abs(x23) > 180.0) x23 = 360.0 - Math.abs(x23);
          x23 *= Math.cos(F * (source[i].lat() + source[end].lat()));
          d23 = (x23 * x23) + (y23 * y23);

          if (d13 >= (d12 + d23)) dev_sqr = d23;
          else if (d23 >= (d12 + d13)) dev_sqr = d13;
          else dev_sqr = (x13 * y12 - y13 * x12) * (x13 * y12 - y13 * x12) / d12; // solve triangle

          if (dev_sqr > max_dev_sqr) {
            sig = i;
            max_dev_sqr = dev_sqr;
          }
        }

        if (max_dev_sqr < band_sqr) { /* is there a sig. intermediate point ? */
          /* ... no, so transfer current start point */
          index[n_dest] = start;
          n_dest++;
        } else {
          /* ... yes, so push two sub-sections on stack for further processing */
          n_stack++;
          sig_start[n_stack - 1] = sig;
          sig_end[n_stack - 1] = end;
          n_stack++;
          sig_start[n_stack - 1] = start;
          sig_end[n_stack - 1] = sig;
        }
      } else {
        /* ... no intermediate points, so transfer current start point */
        index[n_dest] = start;
        n_dest++;
      }
    }

    /* transfer last point */
    index[n_dest] = n_source - 1;
    n_dest++;

    /* make return array */
    var r = new Array();
    for (var i = 0; i < n_dest; i++)
      r.push(source[index[i]]);
    return r;

  }

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>