here is some code for a simple map that gets data from a geoJson variable. My problem is that the infowindows associated with markers won't show up. The strange thing is that if I remove the API Key script, everything seems to work correctly.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps geoJson infowindow test</title>
<style type="text/css">
html, body, #map-canvas {
width: 100%;
height: 500px;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=drawing"></script>
<script type="text/javascript">
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 14,
center: new google.maps.LatLng(-27.779627,153.236112)
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Load the associated GeoJSON
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [153.236112, -27.779627]
},
"properties": {
"name": "[153.236112, -27.779627]",
"description": "Timestamp: 16:37:16.293"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [153.230447, -27.777501]
},
"properties": {
"name": "[153.230447, -27.777501]",
"description": "Timestamp: 16:37:26.298"
}
}
]
}
map.data.addGeoJson(data)
// Set mouseover event for each feature.
map.data.addListener('click', function(event) {
infowindow.setContent(event.feature.getProperty('name')+"<br>"+event.feature.getProperty('description'));
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="content"></div>
<table border="1">
<tr>
<td>
<div id="map-canvas" style="width:580px;height:620px;"></div>
</td>
<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
<div id="info"></div>
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_SECRET_KEY&callback=initialize">
</script>
</body>
</html>Code to remove to make it work locally:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_SECRET_KEY&callback=initialize">
</script>Please need some advice. Thanks.
You are including the API twice, once with the drawing library and once with the callback function. Only include the API once, combine all the parameters (including your API key) as described in the documentation.
code snippet:
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 14,
center: new google.maps.LatLng(-27.779627, 153.236112)
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Load the associated GeoJSON
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [153.236112, -27.779627]
},
"properties": {
"name": "[153.236112, -27.779627]",
"description": "Timestamp: 16:37:16.293"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [153.230447, -27.777501]
},
"properties": {
"name": "[153.230447, -27.777501]",
"description": "Timestamp: 16:37:26.298"
}
}]
}
map.data.addGeoJson(data)
// Set mouseover event for each feature.
map.data.addListener('click', function(event) {
infowindow.setContent(event.feature.getProperty('name') + "<br>" + event.feature.getProperty('description'));
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 {
width: 100%;
height: 500px;
margin: 0px;
padding: 0px
}<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initialize&libraries=drawing"></script>
<div id="content"></div>
<table border="1">
<tr>
<td>
<div id="map-canvas" style="width:580px;height:620px;"></div>
</td>
<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
<div id="info"></div>