Skip to content

Instantly share code, notes, and snippets.

@geog4046instructor
Last active June 16, 2022 16:01
Show Gist options
  • Save geog4046instructor/fc472ec499502f3e9a76 to your computer and use it in GitHub Desktop.
Save geog4046instructor/fc472ec499502f3e9a76 to your computer and use it in GitHub Desktop.
Add a GeoJSON layer with a popup showing feature attributes with the Google Maps API
/* This example demonstrates how to create a popup, or an "infowindow", from
* GeoJSON data (USGS earthquake feed). "place" and "mag" are the names of properties in the GeoJSON file.
* This code can be placed before or after other code for adding layers.
*/
map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson');
// Create an infowindow object to use later
var infowindow = new google.maps.InfoWindow();
/* Create a "listener" that will wait for the user to click an earthquake point,
* and then display the infowindow with details about that earthquake.
*/
map.data.addListener('click', function(event) {
// in the geojson feature that was clicked, get the "place" and "mag" attributes
let place = event.feature.getProperty("place");
let magnitude = event.feature.getProperty("mag");
let html = magnitude + ' magnitude, ' + place; // combine place and magnitude, inserting additional text between them
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);
});
@rishabhclicbrics
Copy link

not working

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment