Question

I have a very simple example for marker clustering, and it doesn't work (I already assessed many posts in the forum). My problem is that the 13 markers are on the map, but no way to cluster them.

Here under you'll find my javascript code. I followed this example: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

In my HTML, I included both markerclusterer.js and markerclusterer_compiled.js

Thank you in advance


function initialize() {

var myOptions = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);

var pos = new google.maps.LatLng(-39.431441,-71.286622);
map.setCenter(pos);

var all = [
    [" -41.8675 ", " -73.827697"],
    [" -23.65 ", " -70.4"],
    [" -42.48014 ", " -73.762414"],
    [" -20.2167 ", " -70.142223"],
    [" -29.906301 ", " -71.250204"],
    [" -39.272254 ", " -71.977629"],
    [" -41.3167 ", " -72.9833"],
    [" -22.908707 ", " -68.199716"],
    [" -33.4625266 ", " -70.6512506"],
    [" -39.819586 ", " -73.24521"],
    [" -33.045646 ", " -71.620361"],
    [" -33.024527 ", " -71.55234"],
    [" -43.1216233 ", " -74.0300122"],
];

for (var i = 0; i < 25; i++) {
        var lat = all[i][0];
        var lng = all[i][1];
        var latLng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({map: map, position: latLng,});
        all.push(marker);
}

var markerCluster = new MarkerClusterer(map, all);  

};

Was it helpful?

Solution

The markercluster takes an array of google.maps.Marker objects, the "all" array is an array of numbers onto the end of which you push some google.maps.Markers.

function initialize() {


var pos = new google.maps.LatLng(-39.431441,-71.286622);

var myOptions = {
    zoom: 4,
    center: pos,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);

map.setCenter(pos);

var all = [
    [-41.8675, -73.827697],
    [-23.65, -70.4],
    [-42.48014, -73.762414],
    [-20.2167, -70.142223],
    [-29.906301, -71.250204],
    [-39.272254, -71.977629],
    [-41.3167, -72.9833],
    [-22.908707, -68.199716],
    [-33.4625266, -70.6512506],
    [-39.819586, -73.24521],
    [-33.045646, -71.620361],
    [-33.024527, -71.55234],
    [-43.1216233, -74.0300122]
];

var gmarkers = [];
for (var i = 0; i < all.length; i++) {
        var lat = all[i][0];
        var lng = all[i][1];
        var latLng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({map: map, position: latLng,});
        gmarkers.push(marker);
}

var markerCluster = new MarkerClusterer(map, gmarkers);

};
      google.maps.event.addDomListener(window, 'load', initialize);

working example

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top