Geek Answers Handbook

How can I integrate MakerClusterer with the current Google Map? V3

I'm having trouble getting MarkerClusterer in my current Google map (it took a lot of time!). How can I combine these two? I am using V3 from api.

Here's the MarkerClusterer code:

var center = new google.maps.LatLng(37.4419, -122.1419); var options = { 'zoom': 13, 'center': center, 'mapTypeId': google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), options); var markers = []; for (var i = 0; i < 100; i++) { var latLng = new google.maps.LatLng(data.photos[i].latitude, data.photos[i].longitude); var marker = new google.maps.Marker({'position': latLng}); markers.push(marker); } var markerCluster = new MarkerClusterer(map, markers);

Update: I tried adding a cluster to my current code, but it does not work. Places[i] does not seem to be served in the cluster.

+4
source share
3 answers

The problem was geocoding. Solved using LOT:

 for (var i = 0; i < address.length; i++) { (function(i) { geocoder.geocode( {'address': address[i]}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { places[i] = results[0].geometry.location; // Adding the markers var marker = new google.maps.Marker({position: places[i]}); markers.push(marker); //add the marker to the markerClusterer markerCluster.addMarker(marker);
+4
source

You just need to add each of your markers to the array, after you add them all, create a MarkerClusterer object

 var markers = []; // Adding a LatLng object for each city for (var i = 0; i < marker_data1.length; i++) { (function(i) { geocoder.geocode( {'address': marker_data1[i]}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { places[i] = results[0].geometry.location; // Adding the markers var marker = new google.maps.Marker({ position: places[i], map: map, title: 'Place number ' + i, }); markers.push(marker); // Creating the event listener. It now has access to the values of // i and marker as they were during its creation google.maps.event.addListener(marker, 'click', function() { // Check to see if we already have an InfoWindow if (!infowindow) { infowindow = new google.maps.InfoWindow(); } // Setting the content of the InfoWindow infowindow.setContent(marker_data[i]); // Tying the InfoWindow to the marker infowindow.open(map, marker); }); // Extending the bounds object with each LatLng bounds.extend(places[i]); // Adjusting the map to new bounding box map.fitBounds(bounds) } else { alert("Geocode was not successful for the following reason: " + status); } }); })(i); } var markerCluster = new MarkerClusterer(map, markers);
+4
source

OK, here is a working solution. I basically cleaned things until it started working. I think the problem might be geocoder. In addition, at the end of var marker = new google.maps.Marker({position: places[i], map: map,}); there is a trailing comma when you create tokens, which will cause problems in IE. You will notice that I use the coordinates instead of the geocoder (which I don’t have), but could it be a conflict between the geocoder and markerclusterer?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> &laquo; Mediwales Mapping</title> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } p { font-family: Helvetica;} </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { // Creating an object literal containing the properties we want to pass to the map var options = { zoom: 10, center: new google.maps.LatLng(52.40, -3.61), mapTypeId: google.maps.MapTypeId.ROADMAP }; // Creating the map var map = new google.maps.Map(document.getElementById('map_canvas'), options); // Creating a LatLngBounds object var bounds = new google.maps.LatLngBounds(); // Creating an array that will contain the addresses var places = []; // Creating a variable that will hold the InfoWindow object var infowindow; var popup_content = ["<p>DTR Medical<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/dtr-logo.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/dtr-medical\/\">View profile<\/a>","<p>MediWales<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/index.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/mediwales\/\">View profile<\/a>","<p>Teamworks Design & Marketing<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/Teamworks-Design-Logo.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/teamworks-design-and-marketing\/\">View profile<\/a>","<p>Acuitas Medical<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/acuitas-medical-logo.gif\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/acuitas-medical\/\">View profile<\/a>","<p>Nightingale<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/Nightingale.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/nightingale\/\">View profile<\/a>"]; var address = ["17 Clarion Court, Llansamlet, Swansea, SA6 8RF","7 Schooner Way, , Cardiff, CF10 4DZ","65 St Brides Rd, Aberkenfig, Bridgend, CF32 9RA","Kings Road, , Swansea, SA1 8PH","Unit 20 Abenbury Way, Wrexham Industrial Estate, Wrexham, LL13 9UG"]; var geocoder = new google.maps.Geocoder(); var markers = []; var places = [ new google.maps.LatLng(53.077528,-2.978211), new google.maps.LatLng(52.83264,-3.906555), new google.maps.LatLng(51.508742,-3.259048), new google.maps.LatLng(51.467697,-3.208923), new google.maps.LatLng(51.628248,-3.923035) ]; // Adding a LatLng object for each city for (var i = 0; i < address.length; i++) { //places[i] = results[0].geometry.location; // Adding the markers var marker = new google.maps.Marker({position: places[i], map: map, draggable:true}); markers.push(marker); // Creating the event listener. It now has access to the values of i and marker as they were during its creation google.maps.event.addListener(marker, 'click', function() { // Check to see if we already have an InfoWindow if (!infowindow) { infowindow = new google.maps.InfoWindow(); } // Setting the content of the InfoWindow infowindow.setContent(popup_content[i]); // Tying the InfoWindow to the marker infowindow.open(map, marker); }); // Extending the bounds object with each LatLng bounds.extend(places[i]); // Adjusting the map to new bounding box map.fitBounds(bounds) ; } var markerCluster = new MarkerClusterer(map, markers, { zoomOnClick: true, averageCenter: true }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body class="home page page-id-1873 page-parent page-template page-template-page-php"> <div id="map_canvas"></div> </body></html>
+1
source

More articles:


All Articles