I am trying to build a website which displays certain meteor strikes throughout the last 200 years in Europe. I got the markers down but I'm having a hard time figuring out how to make them pop-up an info window with the rest of the information that is attached (mass, id, location etc.) can anyone help me out here?
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 45, lng: -1}
});
map.data.loadGeoJson(
'Meteorite.geojson');
}
function information(results) {
map.data.addGeoJson(results);
map.data.addListener('click', function(e) {
infowindow.setPosition(e.latLng);
infowindow.setContent(e.feature.getProperty("id"));
infowindow.open(map);
});
}
You can load and display a GeoJSON file by calling the loadGeoJSON() method of the data object.
An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map. Info windows appear as a Dialog to screen readers.
After constructing an InfoWindow, you must call open to display it on the map. The user can click the close button on the InfoWindow to remove it from the map, or the developer can call close() for the same effect.
To customize the info window in Classic: Click Visualize > Map. Click the "Configure info window" link above the map and select the template to use.
Here is an example using map.data.addGeoJson
(loading geojson from a local variable), but identical is with map.data.loadGeoJson
. On click over a feature infoWindow shows the properties associated:
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: {lat: 45.062, lng: 7.67},
mapTypeId: 'terrain'
});
// Load GeoJSON.
map.data.addGeoJson({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"title": "Mount Viso",
"type": "Point",
"coordinates": [7.090301513671875,44.66743203082226]
},
"properties": {
"name": "Mount Viso",
"description": "the highest mountain of the Cottian Alps",
"link": "https://en.wikipedia.org/wiki/Monte_Viso"
}
}, {
"type": "Feature",
"geometry": {
"title": "Gran Paradiso",
"type": "Point",
"coordinates": [7.266082763671875,45.51837616409498]
},
"properties": {
"name": "Gran Paradiso",
"description": "a mountain in the Graian Alps in Italy",
"link": "https://en.wikipedia.org/wiki/Gran_Paradiso"
}
}]
});
map.data.addListener('click', function(event) {
var feat = event.feature;
var html = "<b>"+feat.getProperty('name')+"</b><br>"+feat.getProperty('description');
html += "<br><a class='normal_link' target='_blank' href='"+feat.getProperty('link')+"'>link</a>";
infowindow.setContent(html);
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With