Google maps API getting infowindow on click with geojson file

Question

I am using the google maps API and I am displaying polygons on a map using a GeoJSON file. When the user presses inside the polygon, I would like an InfoWindow to appear and display data that is stored in the properties. Seems easy enough but when I am clicking on the polygons, nothing is popping up. Can anyone explain what I am doing wrong?

Below is what I am currently attempting:

map.data.loadGeoJson('plant_bounds_2011.json');
     map.data.setStyle({
      fillColor: 'red',
      strokeWeight: 1
    });
    var infowindow = new google.maps.InfoWindow({
        content: "hello"
     });
    map.data.addListener('click', function(event) {
      let id = event.feature.getProperty('ID');
      let name = event.feature.getProperty('HORZ_ORG');
      let html = id + " " + name;
      infowindow.setContent(html); // show the html variable in the infowindow
      infowindow.setPosition(event.feature.getGeometry().get()); // anchor the infowindow at the marker
      infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)}); // move the infowindow up slightly to the top of the marker icon
      infowindow.open(map);
    });

Answer 1

There is a javascript error with the posted code: Uncaught TypeError: event.feature.getGeometry(...).get is not a function on the line:

infowindow.setPosition(event.feature.getGeometry().get()); // anchor the infowindow at the marker`

A Data.Polygon geometry doesn't have a .get() method. It has a .getArray() method (which returns an array of LineStrings)

One location to place the InfoWindow at would be the point clicked (which is in the polygon):

infowindow.setPosition(event.latLng);

(if you want to either add an fixed point for the infowindow to the GeoJson or you want to compute a fixed point from the polygon you can do that as well)

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      zoom: 4,
      center: {
        lat: -28,
        lng: 137
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
  map.data.setStyle({
    fillColor: 'red',
    strokeWeight: 1
  });
  var infowindow = new google.maps.InfoWindow({
    content: "hello"
  });
  map.data.addListener('click', function(event) {
    let id = event.feature.getProperty('ID');
    let name = event.feature.getProperty('HORZ_ORG');
    if (typeof id == "undefined") id = event.feature.getProperty('letter');
    if (typeof name == "undefined") name = event.feature.getProperty('color');
    let html = id + " " + name;
    infowindow.setContent(html); // show the html variable in the infowindow
    infowindow.setPosition(event.latLng);
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, 0)
    }); // move the infowindow up slightly to the top of the marker icon
    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>