asked on

Using MarkerClusterer with Google Maps

I am creating a Google Map with marker data coming from an XML file

The map itself http://www.project4.net/xmlmarkers6/ - click the show markers button to show the markers.

The map XML file is http://www.project4.net/xmlmarkers6/markers.asp

Looking at the documentation http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html its not really clear to me where and how I would modify my JavaScript to enable clustering.

Any guidance would be greatly appreciated.

leakim971

Check lines 31, 52, 62 :

<script type="text/javascript">
$(document).ready(function() {
  $("#map").css({
		height: 600,
		width: 800
	});
	var myLatLng = new google.maps.LatLng(-28.87835,153.482437);
  MYMAP.init('#map', myLatLng, 9);
  
  $("#showmarkers").click(function(e){
		MYMAP.placeMarkers('markers.asp');
  });
});

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

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
	this.bounds = new google.maps.LatLngBounds();
}

MYMAP.placeMarkers = function(filename) {
var markers = [];
	$.get(filename, function(xml){
		$(xml).find("road").each(function(){
			var name = $(this).find('name').text();
			var advisory = $(this).find('advisory').text();
			var statuslabel = $(this).find('status').text();
			var markericon = $(this).find('icon').text();
			
			// create a new LatLng point for the marker
			var lat = $(this).find('lat').text();
			var lng = $(this).find('lng').text();
			var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
			
			// extend the bounds to include the new point
			MYMAP.bounds.extend(point);
			var marker = new google.maps.Marker({
				position: point,
				map: MYMAP.map,
				icon: markericon,
				shadow: "http://roadinfo.s3.amazonaws.com/markers/shadow.png"
			});
markers.push(marker);
			var infoWindow = new google.maps.InfoWindow();
			var html='<strong>'+name+' ['+statuslabel+']</strong.><br />'+advisory;
			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.setContent(html);
				infoWindow.open(MYMAP.map, marker);
			});
			MYMAP.map.fitBounds(MYMAP.bounds);
		});
	});
var markerCluster = new MarkerClusterer(MYMAP.map, markers);
}
</script>

Open in new window

sonic1234

ASKER

Thank you - I have implemented the code at http://www.project4.net/xmlmarkers7/

Unfortunately it is not clustering the markers. Could you kindly check and see what might the issue be.

leakim971

My bad, we need to put the line 62 inside the ajax call of course!!!

<script type="text/javascript">
$(document).ready(function() {
  $("#map").css({
		height: 600,
		width: 800
	});
	var myLatLng = new google.maps.LatLng(-28.87835,153.482437);
  MYMAP.init('#map', myLatLng, 9);
  
  $("#showmarkers").click(function(e){
		MYMAP.placeMarkers('markers.asp');
  });
});

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

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
	this.bounds = new google.maps.LatLngBounds();
}

MYMAP.placeMarkers = function(filename) {
var markers = [];
	$.get(filename, function(xml){
		$(xml).find("road").each(function(){
			var name = $(this).find('name').text();
			var advisory = $(this).find('advisory').text();
			var statuslabel = $(this).find('status').text();
			var markericon = $(this).find('icon').text();
			
			// create a new LatLng point for the marker
			var lat = $(this).find('lat').text();
			var lng = $(this).find('lng').text();
			var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
			
			// extend the bounds to include the new point
			MYMAP.bounds.extend(point);
			var marker = new google.maps.Marker({
				position: point,
				map: MYMAP.map,
				icon: markericon,
				shadow: "http://roadinfo.s3.amazonaws.com/markers/shadow.png"
			});
markers.push(marker);
			var infoWindow = new google.maps.InfoWindow();
			var html='<strong>'+name+' ['+statuslabel+']</strong.><br />'+advisory;
			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.setContent(html);
				infoWindow.open(MYMAP.map, marker);
			});
			MYMAP.map.fitBounds(MYMAP.bounds);
		});
var markerCluster = new MarkerClusterer(MYMAP.map, markers);
	});
}
</script>

Open in new window

sonic1234

ASKER

Thank you I have made that change - unfortunately it is still not clustering the markers.

http://www.project4.net/xmlmarkers7/

I have even tried disabling the custom marker icon and shad on lines 49 and 50 to see it that helps;

Any other ideas? Appreciate your help !

<script type="text/javascript">
$(document).ready(function() {
  $("#map").css({
		height: 600,
		width: 800
	});
	var myLatLng = new google.maps.LatLng(-28.87835,153.482437);
  MYMAP.init('#map', myLatLng, 9);
  
  $("#showmarkers").click(function(e){
		MYMAP.placeMarkers('markers.asp');
  });
});

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

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
	this.bounds = new google.maps.LatLngBounds();
}

MYMAP.placeMarkers = function(filename) {
var markers = [];
	$.get(filename, function(xml){
		$(xml).find("road").each(function(){
			var name = $(this).find('name').text();
			var advisory = $(this).find('advisory').text();
			var statuslabel = $(this).find('status').text();
			var markericon = $(this).find('icon').text();
			
			// create a new LatLng point for the marker
			var lat = $(this).find('lat').text();
			var lng = $(this).find('lng').text();
			var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
			
			// extend the bounds to include the new point
			MYMAP.bounds.extend(point);
			var marker = new google.maps.Marker({
				position: point,
				map: MYMAP.map
				// icon: markericon,
				// shadow: "http://roadinfo.s3.amazonaws.com/markers/shadow.png"
			});
markers.push(marker);
			var infoWindow = new google.maps.InfoWindow();
			var html='<strong>'+name+' ['+statuslabel+']</strong.><br />'+advisory;
			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.setContent(html);
				infoWindow.open(MYMAP.map, marker);
			});
			MYMAP.map.fitBounds(MYMAP.bounds);
		});
var markerCluster = new MarkerClusterer(MYMAP.map, markers);
	});
}
</script>

Open in new window

leakim971

replace your http://www.project4.net/xmlmarkers6/js/markerclusterer_packed.js
by this one : http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sonic1234

ASKER

Thanks for your help. Working perfectly now.