0
Voici un code pour une carte simple qui obtient des données d'une variable geoJson. Mon problème est que les infowindows associés aux marqueurs n'apparaîtront pas. La chose étrange est que si je supprime le script API Key, tout semble fonctionner correctement.Importation de l'API Google Maps JS/GeoJSON - infowindows ne s'affiche pas lorsque la clé API est insérée
<!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
\t var data = {
\t \t \t "type": "FeatureCollection",
\t \t \t "features": [
\t \t \t \t {
\t \t \t \t \t "type": "Feature",
\t \t \t \t \t "geometry": {
\t \t \t \t \t \t "type": "Point",
\t \t \t \t \t \t "coordinates": [153.236112, -27.779627]
\t \t \t \t \t },
\t \t \t \t \t "properties": {
\t \t \t \t \t \t "name": "[153.236112, -27.779627]",
\t \t \t \t \t \t "description": "Timestamp: 16:37:16.293"
\t \t \t \t \t }
\t \t \t \t },
\t \t \t \t {
\t \t \t \t \t "type": "Feature",
\t \t \t \t \t "geometry": {
\t \t \t \t \t \t "type": "Point",
\t \t \t \t \t \t "coordinates": [153.230447, -27.777501]
\t \t \t \t \t },
\t \t \t \t \t "properties": {
\t \t \t \t \t \t "name": "[153.230447, -27.777501]",
\t \t \t \t \t \t "description": "Timestamp: 16:37:26.298"
\t \t \t \t \t }
\t \t \t \t }
\t \t \t ]
\t \t }
\t 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 pour enlever pour le faire fonctionner localement:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_SECRET_KEY&callback=initialize">
</script>S'il vous plaît besoin de quelques conseils. Merci.
Il me semble que vous incluez l'API deux fois, qui cause des problèmes. – geocodezip
A bien fonctionné. Je vous remercie. –