Exemple de cluster de marque Google Maps

Je travaille sur la recherche d'un exemple de base de Google Maps Marker Cluster API v3. Je suis passée par l'exemple ici , mais je ne peux pas bien comprendre. Aidez-moi avec un exemple pour tracer un cluster avec ces données:

var macDoList = [ {lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, {lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, {lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}}, {lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}}, {lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}}, ]; 

Code:

 <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>MarkerClusterer v3 Example</title> <style type="text/css"> #map { width: 600px; height: 400px; } </style> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var center = new google.maps.LatLng(37.4419, -122.1419); var map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }); var markers = []; var macDoList = [ {lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, {lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, {lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}}, {lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}}, {lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}}, ]; for(var i=0;i<5;i++){ console.log(macDoList[i].lat) var latLng = new google.maps.LatLng(macDoList[i].lat, macDoList[i].lng); var marker = new google.maps.Marker({ position: latLng }); markers.push(marker); } var markerCluster = new MarkerClusterer(map, markers); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-container"><div id="map"></div></div> </body> </html> 

Une erreur a été signalée:

 Uncaught ReferenceError: MarkerClusterer is not defined 

Parce que library markerclusteres.js n'est pas inclus. Vous devez le faire comme:

 <script src='../../js/markerclusterer.js'></script> 

Lorsque cela est correct, vous ne voyez rien parce que le centre est défini sur les États-Unis, toutes vos données concernent la France.

Les marqueurs ne sont pas visibles car la carte n'est pas définie pour eux. Il devrait être fait en utilisant la map options:

 function initialize() { //var center = new google.maps.LatLng(37.4419, -122.1419); var center = new google.maps.LatLng(49, 2.56); var map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }); var markers = []; var macDoList = [ {lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, {lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, {lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}}, {lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}}, {lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}}, ]; for(var i=0;i<5;i++){ console.log(macDoList[i].lat) var latLng = new google.maps.LatLng( macDoList[i].lat, macDoList[i].lng); var marker = new google.maps.Marker({ position: latLng, map: map }); markers.push(marker); } var markerCluster = new MarkerClusterer(map, markers); }