// arrays to hold copies of the markers and html used by the sidebar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
function MakeMap() {
// Globals.
// Icon(s), and if gender is enabled, php will allow those to be defined.
function cancelscroll() {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// For that lovly clustering thing!
var clusterIcon = new GIcon();
clusterIcon.image = "http://labs.google.com/ridefinder/images/mm_20_purple.png";
clusterIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
clusterIcon.iconSize = new GSize(12, 20);
clusterIcon.shadowSize = new GSize(22, 20);
clusterIcon.iconAnchor = new GPoint(6, 20);
clusterIcon.infoWindowAnchor = new GPoint(5, 1);
var iconm = new GIcon();
iconm.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
iconm.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
iconm.iconSize = new GSize(12, 20);
iconm.shadowSize = new GSize(22, 20);
iconm.iconAnchor = new GPoint(6, 20);
iconm.infoWindowAnchor = new GPoint(5, 1);
var iconf = new GIcon();
iconf.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
iconf.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
iconf.iconSize = new GSize(12, 20);
iconf.shadowSize = new GSize(22, 20);
iconf.iconAnchor = new GPoint(6, 20);
iconf.infoWindowAnchor = new GPoint(5, 1);
if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventually be placed in the sidebar
var sidebar_html = "";
var i = 0;
// A function to create the marker and set up the event window
function createMarker(point, icon, name, html) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
map.getCenter(point);
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the sidebar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the sidebar html
sidebar_html += '' + name + '
';
//Now that we cached it lets return the marker....
i++;
return marker;
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.enableScrollWheelZoom();
map.enableContinuousZoom();
// Sets the map type based on admin prefrence API 1 !!!
//map.setMapType(G_HYBRID_MAP);
// Lets load up the default long/lat/zoom for the map for those that like wine.
map.setCenter(new GLatLng(39.791655, -7.998047), 6,G_HYBRID_MAP);
// This is so we can try to cluster some of those pins together so the map does not get over loaded?
var clusterer = new Clusterer(map);
clusterer.icon = clusterIcon;
clusterer.minMarkersPerClusterer = 5;
clusterer.maxVisibleMarkers = 150;
clusterer.GridSize = 5;
clusterer.MaxLinesPerInfoBox = 10;
// Read the data
var request = GXmlHttp.create();
request.open("GET", "http://www.clubdtr.pt/index.php?PHPSESSID=cri55o5sq69nt83rekkrm2kli4&action=googlemap;sa=.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].childNodes[0].nodeValue;
var label = markers[i].getAttribute("label");
// create the marker
if (parseFloat(markers[i].getAttribute("gender")) == 0)
var marker = createMarker(point, icon, label, html);
if (parseFloat(markers[i].getAttribute("gender")) == 1)
var marker = createMarker(point, iconm, label, html);
if (parseFloat(markers[i].getAttribute("gender")) == 2)
var marker = createMarker(point, iconf, label, html);
map.addOverlay(marker);
}
// put the assembled sidebar_html contents into the sidebar div
document.getElementById("gooSidebar").innerHTML = sidebar_html;
}
}
request.send(null);
} else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
}
setTimeout('MakeMap()', 500);