How to create multiple polygons on the same google map?

Question

I have the following coordinates:

 var singida = [
        new google.maps.LatLng(-6.926427,33.464355),
        new google.maps.LatLng(-7.057282,33.662109),
        new google.maps.LatLng(-7.122696,33.750000),
        new google.maps.LatLng(-7.209900,33.771973),
        new google.maps.LatLng(-7.471411,33.750000),
        new google.maps.LatLng(-7.536764,33.793945),
        new google.maps.LatLng(-7.536764,33.969727)];


 var Tabora = [
        new google.maps.LatLng(-4.127285,31.684570),
        new google.maps.LatLng(-4.236856,31.684570),
        new google.maps.LatLng(-4.258768,31.508789),
        new google.maps.LatLng(-4.236856,31.486816),
        new google.maps.LatLng(-4.302591,31.464844),
        new google.maps.LatLng(-4.477856,31.420898),
        new google.maps.LatLng(-4.631179,31.464844)];

How do I draw the two polygons on the same map? My code below only works for a single polygon

 var flightPath = new google.maps.Polygon({
        path: singida,
        geodesic: false,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 1
    });

Answer 1

Just make two separate polygons, one with each of the paths. This works for me:

var singida = [
new google.maps.LatLng(-6.926427, 33.464355),
new google.maps.LatLng(-7.057282, 33.662109),
new google.maps.LatLng(-7.122696, 33.750000),
new google.maps.LatLng(-7.209900, 33.771973),
new google.maps.LatLng(-7.471411, 33.750000),
new google.maps.LatLng(-7.536764, 33.793945),
new google.maps.LatLng(-7.536764, 33.969727)];


var Tabora = [
new google.maps.LatLng(-4.127285, 31.684570),
new google.maps.LatLng(-4.236856, 31.684570),
new google.maps.LatLng(-4.258768, 31.508789),
new google.maps.LatLng(-4.236856, 31.486816),
new google.maps.LatLng(-4.302591, 31.464844),
new google.maps.LatLng(-4.477856, 31.420898),
new google.maps.LatLng(-4.631179, 31.464844)];

var polygon1 = new google.maps.Polygon({
    path: singida,
    geodesic: false,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
});

var polygon2 = new google.maps.Polygon({
    path: Tabora,
    geodesic: false,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
});

(but it looks like the coordinates in the paths are out of order, are missing points or aren't closed correctly)

Another option would be to make an array of polygons.

code snippet:

var bounds = new google.maps.LatLngBounds();

var geocoder;
var map;
var polygons = [];

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
    });
  var singida = [
    new google.maps.LatLng(-6.926427, 33.464355),
    new google.maps.LatLng(-7.057282, 33.662109),
    new google.maps.LatLng(-7.122696, 33.750000),
    new google.maps.LatLng(-7.209900, 33.771973),
    new google.maps.LatLng(-7.471411, 33.750000),
    new google.maps.LatLng(-7.536764, 33.793945),
    new google.maps.LatLng(-7.536764, 33.969727)
  ];


  var Tabora = [
    new google.maps.LatLng(-4.127285, 31.684570),
    new google.maps.LatLng(-4.236856, 31.684570),
    new google.maps.LatLng(-4.258768, 31.508789),
    new google.maps.LatLng(-4.236856, 31.486816),
    new google.maps.LatLng(-4.302591, 31.464844),
    new google.maps.LatLng(-4.477856, 31.420898),
    new google.maps.LatLng(-4.631179, 31.464844)
  ];

  polygons.push(new google.maps.Polygon({
    path: singida,
    geodesic: false,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
  }));
  polygons.push(new google.maps.Polygon({
    path: Tabora,
    geodesic: false,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
  }));
  for (var j = 0; j < polygons.length; j++) {
    for (var i = 0; i < polygons[j].getPath().getLength(); i++) {
      bounds.extend(polygons[j].getPath().getAt(i));
    }
  }

  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

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"></div>

Answer 2

Google map provides features of multiple polygon.

    var singida = [
new google.maps.LatLng(-6.926427, 33.464355),
new google.maps.LatLng(-7.057282, 33.662109),
new google.maps.LatLng(-7.122696, 33.750000),
new google.maps.LatLng(-7.209900, 33.771973),
new google.maps.LatLng(-7.471411, 33.750000),
new google.maps.LatLng(-7.536764, 33.793945),
new google.maps.LatLng(-7.536764, 33.969727)];


var Tabora = [
new google.maps.LatLng(-4.127285, 31.684570),
new google.maps.LatLng(-4.236856, 31.684570),
new google.maps.LatLng(-4.258768, 31.508789),
new google.maps.LatLng(-4.236856, 31.486816),
new google.maps.LatLng(-4.302591, 31.464844),
new google.maps.LatLng(-4.477856, 31.420898),
new google.maps.LatLng(-4.631179, 31.464844)];

var polygon1 = new google.maps.Polygon({
    paths: [singida, Tabora],
    geodesic: false,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
});

Very simple create multiple array variables and add into paths array

Answer 3

You can use Polygon Hole, setting the position of the second (or another) polygons outside of the first polygon.

Polygon Hole: https://developers.google.com/maps/documentation/javascript/examples/polygon-hole

Ex: Open the link above, and set the coordinates as below:

// Define the LatLng coordinates for the polygon's  outer path.
var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
];

// Define the LatLng coordinates for the polygon's inner path.
// Note that the points forming the inner path are wound in the
// opposite direction to those in the outer path, to form the hole.
var innerCoords = [
    {lat: 35.745, lng: -70.579},
    {lat: 38.570, lng: -67.514},
    {lat: 36.570, lng: -64.255},
    {lat: 33.339, lng: -66.668}
];

It will make two or more polygons at the same image.

[]'s