How to draw multiple polygons with Google-Maps-Api-3?

Question

I am trying to draw multiple polygons iteratively into google maps. This is what I have so far:

var map;
var infoWindow;
var bermudaTriangle = new Array();


// Angular controllers etc


function initialize() {

  // map options
  var mapOptions = {
    zoom: 20,
    center: new google.maps.LatLng(52.081336668, 5.124039573),
    mapTypeId: google.maps.MapTypeId.TERRAIN

  };


  // initialize 
  //var bermudaTriangle;
  var bounds = new google.maps.LatLngBounds();


  // define map
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // ************** POLYGON 1 **************************************************

  // Define the LatLng coordinates for the polygon.
  //var coorArray = [[[25.774252, -80.190262],[18.466465, -66.118292],[32.321384, -64.75737],[25.774252, -80.190262]]];

    var coorArray = [[[5.129820025,52.085407733],[5.129117875,52.086181679],[5.128497179,52.087946286],[5.128458022,52.088253322],[5.12866837,52.088507157],[5.129251266,52.088976802],[5.129473861,52.08926905],[5.129385309,52.089499203],[5.12909759,52.089698198],[5.127961124,52.090148712],[5.127685173,52.090462912],[5.127310682,52.091653473],[5.12710699,52.092271708],[5.127126612,52.092518366],[5.128237531,52.093468305],[5.128130926,52.093688728],[5.126525853,52.094399058],[5.126377274,52.09459342],[5.126284571,52.095035437],[5.130996578,52.095312264],[5.137138625,52.095591962],[5.139036247,52.095628598],[5.138962372,52.095484813],[5.137879856,52.093651573],[5.137480747,52.093048367],[5.136997815,52.092468872],[5.13643473,52.091917507],[5.135795776,52.091398471],[5.134288171,52.090401311],[5.133608279,52.089984575],[5.133259679,52.089768435],[5.132932239,52.089549796],[5.132656508,52.089342179],[5.132411195,52.089120552],[5.132198186,52.088886599],[5.132143714,52.088818019],[5.130950838,52.087097103],[5.130737143,52.086736442],[5.130575274,52.086365674],[5.130403794,52.085570404],[5.129783706,52.08522338],[5.129820025,52.085407733]]];

    var triangleCoords = new Array();
    var element1;
    var element2;

    for (i = 0; i < coorArray[0].length; i++) { 
      element1 = coorArray[0][i][1];
      element2 = coorArray[0][i][0];
      triangleCoords.push(new google.maps.LatLng(element1, element2));
    }


  // Construct the polygon.
  bermudaTriangle[0] = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#GG5555',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#GG0000',
    fillOpacity: 0.35
  });


  // ************** POLYGON 2 **************************************************

  window.alert("size before: " + bermudaTriangle.length)

  var coorArray2 = [[[5.124039573,52.081336668],[5.123786124,52.080881152],[5.122959636,52.079497242],[5.122391068,52.078743511],[5.121372746,52.079116894],[5.120311295,52.079552143],[5.119436465,52.080026204],[5.118998806,52.08030162],[5.118310391,52.080845197],[5.117645798,52.081565422],[5.115689749,52.083649376],[5.113520057,52.086009212],[5.114690896,52.086447262],[5.117083346,52.08727212],[5.117522428,52.086774053],[5.119780236,52.084249233],[5.12004402,52.08388896],[5.120586169,52.082807573],[5.121381599,52.08102804],[5.121656807,52.080836711],[5.12210523,52.080845396],[5.122882168,52.081123542],[5.123980025,52.081437992],[5.123982191,52.081434411],[5.124039573,52.081336668]]]

  addNewPoly(coorArray2);

  window.alert("size after: " + bermudaTriangle.length)

  for(var i=0,l=bermudaTriangle.length;i<l;i++) {
    bermudaTriangle[i].setMap(map);

    // map.fitBounds(bounds);


  // Add a listener for the click event.
  google.maps.event.addListener(bermudaTriangle[i], 'click', showArrays);

  infoWindow = new google.maps.InfoWindow();


  }

function addNewPoly(coorArray2) {

    var triangleCoords = new Array();
    var element1;
    var element2;

    window.alert("inside addNewPoly")

    for (i = 0; i < coorArray[0].length; i++) { 
      element1 = coorArray[0][i][1];
      element2 = coorArray[0][i][0];
      triangleCoords.push(new google.maps.LatLng(element1, element2));
    }

    // Construct the polygon.
  bermudaTriangle[bermudaTriangle.length] = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#GG5555',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#GG0000',
    fillOpacity: 0.35
  });

  return bermudaTriangle;

  }

  /** @this {google.maps.Polygon} */
function showArrays(event) {

  // Since this polygon has only one path, we can call getPath()
  // to return the MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
  }

}

google.maps.event.addDomListener(window, 'load', initialize);

Basically it only draws the first polygon when I do it like this. Preferably I will do it using AngularJS, but for the moment I would be satisfied if it works in Javascript.

I extracted this example from the Google-Maps-API-3 tutorial and worked around it.

Answer 1

Into your addNewPoly function you pass an array of coordinates, coorArray2:

function addNewPoly(coorArray2)

However you never use it, you're referring to coorArray:

for (i = 0; i < coorArray[0].length; i++) { 
  element1 = coorArray[0][i][1];
  element2 = coorArray[0][i][0];
  triangleCoords.push(new google.maps.LatLng(element1, element2));
}

Change this and it should work

for (i = 0; i < coorArray2[0].length; i++) { 
  element1 = coorArray2[0][i][1];
  element2 = coorArray2[0][i][0];
  triangleCoords.push(new google.maps.LatLng(element1, element2));
}