I'm trying to use the google maps api MarkerClusterer function [link] [1]
[1]: link to group addresses but is not working, continue showing without grouping. Here's my code:
// delay between geocode requests - at the time of writing, 100 miliseconds seems to work well
var delay = 100;
// ====== Create map objects ======
var infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(-15.7942306, -47.8821677);
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var geo = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
var markers;
// ====== Geocoding ======
function getAddress(search, markerTitle, next) {
geo.geocode({address:search}, function (results,status)
{
// If that was successful
if (status == google.maps.GeocoderStatus.OK) {
// Lets assume that the first marker is the one we want
var p = results[0].geometry.location;
var lat=p.lat();
var lng=p.lng();
// Create a marker
createMarker(search,markerTitle,lat,lng);
}
// ====== Decode the error status ======
else {
// === if we were sending the requests to fast, try this one again and increase the delay
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay++;
}
}
next();
}
);
}
// ======= Function to create a marker
function createMarker(add,markerTitle,lat,lng) {
var contentString = markerTitle;
markers = addresses.map(function(location, i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
bounds.extend(marker.position);
});
}
// ======= An array of locations that we want to Geocode ========
var addresses = <?php echo $cords; ?>
// ======= Global variable to remind us what to do next
var nextAddress = 0;
// ======= Function to call the next Geocode operation when the reply comes back
function theNext() {
$('#loading').show();
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress][1]+'","'+addresses[nextAddress][0]+'",theNext)', delay);
nextAddress++;
} else {
// We're done. Show map bounds
map.fitBounds(bounds);
$('#loading').hide();
}
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
// ======= Call that function for the first time =======
theNext();