I am creating a google map to show user locations; for privacy I am not using the actual address of the user but the nearest town.
I have used some code from Google’s website allowing me to put the pin data into a database and extract it into an xml file. I chose this method as the XML file contains a lot more information than just the pins.
I have now created myself a problem as if two users pick the same town for their location one icon will be behind another and will not be displayed. I could offset the pin slightly so it shows up which is one option but this will mean I have more than one lat and lng for each town.
Google has some Markercluster code but it will not work if two or more flags are overlapping.
I found Some code called spiderfy but as with everything it is not so simple as the tutorial is not for the code I have ( I have already added some custom flag code ) and it is more suited for somebody who has some JavaScript experience which I have not.
I have had a go at inserting the code but to be honest I have no idea what I am doing; could somebody give me some direction? For instance I do not even know where I am supposed to put the Spiderfier code - keep it in its own folder; put the code into the same folder as the map etc.
This is my map code so far and the link above will take you to the Spiderfier page on github.
//<![CDATA[
var customIcons = {
DBR: {
icon: 'icons/DBR.png'
},
MFR: {
icon: 'icons/MFR.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(52.086597,-0.264096),
zoom: 10,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var photo = markers[i].getAttribute("photo");
var completed = markers[i].getAttribute("completed");
var referance = markers[i].getAttribute("referance");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var contentString = '<div class="info-window"><b>' + name + '</b> completed this in ' + completed +
'<br/><br/><a href="large/' + photo + '.jpg"><img src="thumb/' + photo +
'.jpg" alt="Click for a larger version" title="Click for a larger version"><a><br> Referance number: ' + referance + '</div>';
var icon = customIcons[model] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, contentString);
}
});
}
function bindInfoWindow(marker, map, infoWindow, contentString) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>