I'm trying to add a info window to each of my features in a Google Map. In the example from Google () They add an info window directly to a marker. I don't have a explicit market to add my info window, instead I have a collection of data that I imported from a GeoJson file.

I can add a click listener to each feature, and create a new InfoWindow with the correct description. However, I get an error (b.get is not a function) when opening the InfoWindow.

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(28.7, -15.0),
    mapTypeId: 'terrain'
});

map.data.loadGeoJson('.0/summary/4.5_week.geojson');

map.data.setStyle(function (feature) {
    var magnitude = feature.getProperty('mag');
    return {
        icon: getCircle(magnitude)
    };
});

map.data.addListener('click', function (event) {
    var infowindow = new google.maps.InfoWindow({
        content: event.feature.getProperty('place')
    });
    infowindow.open(map, event.feature);
});

I'm trying to add a info window to each of my features in a Google Map. In the example from Google (https://developers.google./maps/documentation/javascript/infowindows) They add an info window directly to a marker. I don't have a explicit market to add my info window, instead I have a collection of data that I imported from a GeoJson file.

I can add a click listener to each feature, and create a new InfoWindow with the correct description. However, I get an error (b.get is not a function) when opening the InfoWindow.

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(28.7, -15.0),
    mapTypeId: 'terrain'
});

map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson');

map.data.setStyle(function (feature) {
    var magnitude = feature.getProperty('mag');
    return {
        icon: getCircle(magnitude)
    };
});

map.data.addListener('click', function (event) {
    var infowindow = new google.maps.InfoWindow({
        content: event.feature.getProperty('place')
    });
    infowindow.open(map, event.feature);
});

• javascript
• google-maps

1 Answer 1

The error I get with the posted code (once I include all the missing pieces) is Uncaught TypeError: b.get is not a function

The second parameter of the InfoWindow.open method is required to be a MVCObject that exposes a LatLng position property, the only one of which in the core API is a google.maps.Marker (not a event.feature)

from the documentation:

open(map?:Map|StreetViewPanorama, anchor?:*) | Return Value: None
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.

The work around is to set the position of the InfoWindow:

map.data.addListener('click', function(event) {
  var infowindow = new google.maps.InfoWindow({
    content: event.feature.getProperty('place')
  });
  infowindow.setPosition(event.latLng);
  infowindow.open(map);
});

proof of concept fiddle

code snippet:

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(28.7, -15.0),
    mapTypeId: 'terrain'
  });

  map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson');

  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });

  map.data.addListener('click', function(event) {
    var infowindow = new google.maps.InfoWindow({
      content: event.feature.getProperty('place')
    });
    infowindow.setPosition(event.latLng);
    infowindow.open(map);
  });
}
google.maps.event.addDomListener(window, "load", initMap);
// from google sample at: https://developers.google./maps/documentation/javascript/earthquakes 
function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / 2,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>