Geek Answers Handbook

Google Map Cluster Map Example

I am working on finding a basic example of the Google Maps Marker Cluster API v3. I looked at an example here , but I cannot get it right. Please help me with an example of building a cluster with this data:

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"}}, ];

the 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>
+7
javascript jquery google-maps google-maps-api-3 markerclusterer
source share
1 answer

One error reported:

 Uncaught ReferenceError: MarkerClusterer is not defined

because markerclusteres.js library markerclusteres.js not included. You should do it like:

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

When this correction, you see nothing, because the center is installed in the USA, all your data is for France.

Markers are not visible because no map is installed for them. this should be done using the map option:

 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); }
+8
source share

More articles:


All Articles