Google Maps API v3 - loading markers from xml file and integrating markercluster

Question

Hi all and thanks for the support. I have a website that loads GoogleMaps API v3 and places markers from a XML file and I am trying to integrate it with the MarkerCluster. No matter what I try It seems to be wrong. Can someone help? I will paste the code that renders the map and loads the data from the xml... Can someone explain where to add the Markercluster specific code? Thank you.

PS: feel free to use the code if you like it – I've also been able to write it thanks to several examples on the web.

<script type="text/javascript" >
$(document).ready(function() {
var myLatLng = new google.maps.LatLng(21.150272,-4.636016);
MYMAP.init('#map', myLatLng, 2);
MYMAP.placeMarkers('markers/markers.xml');
});

var styles = [ { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "saturation": -100 }, { "lightness": -61 } ] },{ "featureType": "road", "elementType": "labels", "stylers": [ { "saturation": -67 }, { "visibility": "off" } ] },{ "featureType": "poi", "stylers": [ { "lightness": 40 }, { "saturation": -73 } ] },{ "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.land_parcel", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.neighborhood", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [ { "color": "#ffff80" }, { "weight": 1 } ] },{ "featureType": "landscape", "stylers": [ { "saturation": -89 }, { "lightness": 25 } ] },{ "featureType": "water", "elementType": "labels", "stylers": [ { "visibility": "off" } ] } ]

var MYMAP = {
map: null,
bounds: null
}

MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_CENTER,
},
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}


MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var facebook = $(this).find('facebook').text();
var linkedin = $(this).find('linkedin').text();
var twitter = $(this).find('twitter').text();
var photo = $(this).find('photo').text();
var ico = $(this).find('ico').text();
var city = $(this).find('city').text();
var country = $(this).find('country').text();
var email = $(this).find('email').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

MYMAP.bounds.extend(point);

var marker = new google.maps.Marker({
position: point,
map: MYMAP.map,
icon: 'img/'+ico+'marker.png'
});


var infoWindow = new google.maps.InfoWindow();

var html='<div class="img"><img src="markers/'+photo+'.jpg"></div><div          class="txt"><p>'+name+'</p><br /><p>'+city+',<br />'+country+'</p><br /><div style="margin-top:-4px"><a target="" href="'+facebook+'"><img src="img/gosocial16/facebook.png"></a><a target="" href="'+twitter+'"><img src="img/gosocial16/twitter.png"></a><a target="" href="'+linkedin+'"><img src="img/gosocial16/linkedin.png"></a><a target="" href="'+email+'"><img style="margin-left:3px" src="img/gosocial16/email.png"></a></div></div>';


google.maps.event.addListener(MYMAP.map, 'zoom_changed', function() {
if (MYMAP.map.getZoom() < 2) MYMAP.map.setZoom(2);
});
google.maps.event.addListener(MYMAP.map, 'zoom_changed', function() {
if (MYMAP.map.getZoom() > 18) MYMAP.map.setZoom(18);
});


google.maps.event.addListener(marker, 'click', function() {

$("#close").click(function() {
infoWindow.close();
});

infoWindow.setContent(html);
infoWindow.setOptions({maxWidth:350});
infoWindow.open(MYMAP.map, marker);
});


MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}

</script>

Answer 1

Here is an example based off of Mike Williams' v2 tutorial, ported to v3.

If you look at the documentation for MarkerClusterer, it includes this example:

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);

If you add it into your existing loop, you should be able to just do this after you create the marker variable:

  markers.push(marker);    

Then create the marker clusterer where you currently call fitBounds. Did you try that and it didn't work?

Working example based off your code, adding the MarkerClusterer per the suggestion above; major modifications to use the marker clusterer's sample data as couldn't use yours.