google-mapsgoogle-maps-markerspolygons

Google maps polygon naming

I am able to plot 3 polygon areas on google maps using below code,

    var var_2 = [
    << latitude, longitudes>>.....            

    ];
    var boundary2 = new google.maps.Polygon({
        paths: var_2,
        geodesic: true,
        strokeColor: 'blue',
        strokeOpacity: 0.2,
        strokeWeight: 2,
        fillColor: 'blue',
        fillOpacity: 0.2
    });
    boundary2.setMap(map);
    boundary2.addListener('click', showArrays);
    infoWindow = new google.maps.InfoWindow;

    function showArrays(event) {
        var vertices = this.getPath();
        var contentString = 'AREA_1';
        infoWindow.setContent(contentString);
        infoWindow.setPosition(event.latLng);
        infoWindow.open(map);
    }

But all the 3 polygons take the same name 'AREA_3'. Please help me fix this.

-Thanks

Solution

  • Simplest solution: add the "content" as a custom property of the polygon, then you can access it in the click listener as this.content (assuming content is the custom property:

    function showArrays(event) {
    var vertices = this.getPath();
    infoWindow.setContent(this.content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
}

var boundary3 = new google.maps.Polygon({
    paths: var_3,
    geodesic: true,
    strokeColor: 'blue',
    strokeOpacity: 0.2,
    strokeWeight: 2,
    fillColor: 'blue',
    fillOpacity: 0.2,
    content: "AREA_3"
});
boundary3.setMap(map);
boundary3.addListener('click', showArrays);

    proof of concept fiddle

    screenshot of map

    code snippet:

    var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(45.6, -40.4),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var var_1 = [
    new google.maps.LatLng(45.6, -40.4),
    new google.maps.LatLng(40.0, -40.4),
    new google.maps.LatLng(45.6, -35.0)
  ]
  var boundary1 = new google.maps.Polygon({
    paths: var_1,
    geodesic: true,
    strokeColor: 'blue',
    strokeOpacity: 0.2,
    strokeWeight: 2,
    fillColor: 'blue',
    fillOpacity: 0.2,
    content: "AREA_1"
  });
  boundary1.setMap(map);
  boundary1.addListener('click', showArrays);

  var var_2 = [
    new google.maps.LatLng(59.677361, -2.469846),
    new google.maps.LatLng(59.299717, -6.314917),
    new google.maps.LatLng(57.877247, -9.314917),
    new google.maps.LatLng(54.428078, -11.638861),
    new google.maps.LatLng(51.784554, -11.702241),
    new google.maps.LatLng(50.185848, -10.054354),
    new google.maps.LatLng(49.405380, -7.012100),
    new google.maps.LatLng(49.090675, -3.272664),
    new google.maps.LatLng(48.775970, -1.709283),
    new google.maps.LatLng(49.757851, -2.089565),
    new google.maps.LatLng(50.714554, 1.037195),
    new google.maps.LatLng(51.482437, 2.304801),
    new google.maps.LatLng(53.433609, 3.276632),
    new google.maps.LatLng(55.863132, 3.445646)

  ];
  var boundary2 = new google.maps.Polygon({
    paths: var_2,
    geodesic: true,
    strokeColor: 'blue',
    strokeOpacity: 0.2,
    strokeWeight: 2,
    fillColor: 'blue',
    fillOpacity: 0.2,
    content: "AREA_2"
  });
  boundary2.setMap(map);
  boundary2.addListener('click', showArrays);
  var var_3 = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.757370),
    new google.maps.LatLng(25.774252, -80.190262)
  ];
  var boundary3 = new google.maps.Polygon({
    paths: var_3,
    geodesic: true,
    strokeColor: 'blue',
    strokeOpacity: 0.2,
    strokeWeight: 2,
    fillColor: 'blue',
    fillOpacity: 0.2,
    content: "AREA_3"
  });
  boundary3.setMap(map);
  boundary3.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;

  function showArrays(event) {
    var vertices = this.getPath();
    infoWindow.setContent(this.content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
}
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>