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>