Last active
June 16, 2022 16:01
-
-
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
not working