Quick delve into the world of Google maps this weekend when trying to map ADSL faults to their location.

My aims were to group the faults by the exchange they connect to, change the image icon, and resize it based on the number of faults at that exchange.

MarkerClusterer groups markers by proximity but doesn't seem to allow custom grouping, so I decide to DIY it.

After testing the basics with PHP, I set up a simple WebService with C# that would provide the latitude and longitude of the Exchange, its name, and the number of faults. I then call the WebService using ajax:

$.ajax({
type: "POST",
url: "WebService.asmx/GetMarkers",
data: '',
contentType: "application/json; charset=utf-8", dataType: "json",
success: function (msg) {

I then iterate through each object in the JSON array and use the count value for the number of faults to set the

$.each(msg.d, function (index, item) {
size = 5 + Math.min( (item.Count / 2) * 5, 50);
var image = new google.maps.MarkerImage("disconnect2.png", null, null, null, new google.maps.Size(size, size));

and then generate the marker with a custom image, the calculated size, and the exchange code:

var marker = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(item.Lat), parseFloat(item.Long)),
map: map,
icon: image,
title: item.CircuitID
});

And then we get this!

map