Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm having trouble getting the MarkerClusterer into my current Google Map (which has taken a long time to get this far!!). How can I combine the two? I'm using V3 of the api.

Here's the example I'm working on http://www.mediwales.com/mapping

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've attempted to add the clusterer to my current code but it doesn't seem to work. Places[i] doesn't seem to feed into the clusterer.

share|improve this question

2 Answers 2

up vote 5 down vote accepted

Here is a simple working example of using the MarkerCluster and geocoding in v3 of the API.

In your code, instead of adding the latlng of the marker to Markers array, add the marker objects to your markerClusterer instance directly.

If you add Markers to the markerCluster, it will be empty. The code sends off the geocoding requests, then moves along. By the time the requests are answered by Google, the Markers array has been added to the markerCluster without any markers in it.

You have to add each marker to markerCluster instance directly in the geocoder callback function using the markerCluster's addMarker() method.

EDIT, Response to comment:

Here is your code, with my edits. I can't fully test it because I don't have access to your data, but it should work. I made three changes to fix the code. 1. Create the markerCluster without the markersArray parameter and move it near the top of the code. You'll add the markers individually as they the geocode responses come back. 2. Remove the map parameter from the marker option object. The markerCluster will handle adding the markers to the map. 3. Add the markers to the markerCluster instance individually by using addMarker(marker) in the geocode callback function.

(function() {
    window.onload = function() {
    // 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'), 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;
    // markerclusterer
    var markerCluster = new MarkerClusterer(map);
    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 = [];
    // Adding a LatLng object for each city
    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);
    // 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)
    } else {
    alert("Geocode was not successful for the following reason: " + status);
    }
    });
    })(i);
    }

    }
    })
    (); 
share|improve this answer
    
Thanks for the answer. Could you possibly put it into my code as an example? Until yesterday I didn't know anything about all this so things go a little over my head! –  Rob Sep 26 '11 at 17:39
    
Literally just solved it from your first answer, thanks very much! Only one thing, is there any way to make it smoother so when you click on the cluster it doesn't jump so much? –  Rob Sep 26 '11 at 17:58
    
Really appreciate your help. –  Rob Sep 26 '11 at 18:12
    
@Rob , no problem. Regarding the smoothness, that's something inherent in the library and google maps api. I'm not sure how you would go about fixing it without making some changes to the markercluster source code, or if its even possible –  Casey Sep 26 '11 at 18:15
    
Ok, was just being picky. It works and that's the main thing. Thanks again, wish I came on here sooner, all the nerds in the world on stackoverflow.com couldn't solve it, you solved it straight away! –  Rob Sep 26 '11 at 18:18

it is a scope of variables problem. Actually, you get all values, places[i] returns positions like (51.664566, -3.907799000000068).

markers var is populated into you anonymous function but it is not returned and has the value 0 when called by the following line of code :

var markerCluster = new MarkerClusterer(map, markers); 
share|improve this answer
1  
Thanks for replying. How can I fix it, literally been banging my head on the table over this! –  Rob Sep 26 '11 at 15:56
    
You could maybe avoid the use of the anonymous function, but anyway, I think you should follow up casey's example! –  simo Sep 26 '11 at 16:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.