// globals var xhr = false; // arrays to hold copies of the markers and html used by the sidebar var gmarkers = []; var htmls = []; var sidebar_html = ""; // map, cluster and info bubble var map = null; var mc = null; var infowindow = null; // icon locations var codebase = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer"; var chartbase = "http://chart.apis.google.com/chart"; // our normal pin to show on the map var npic = new google.maps.MarkerImage( chartbase + "?chst=d_map_pin_letter_withshadow&chld=|66FF66|202020", new google.maps.Size(40, 37), new google.maps.Point(0, 0), new google.maps.Point(13, 37), new google.maps.Size(27, 25) ); // various cluster pin styles var styles = [[ {url: chartbase + "?chst=d_map_pin_letter_withshadow&chld=|FF66FF|202020", width: 27, height: 25}, {url: chartbase + "?chst=d_map_pin_letter_withshadow&chld=|FF66FF|202020", width: 27, height: 25}, {url: chartbase + "?chst=d_map_pin_letter_withshadow&chld=|FF66FF|202020", width: 27, height: 25}, {url: chartbase + "?chst=d_map_pin_letter_withshadow&chld=|FF66FF|202020", width: 27, height: 25}, {url: chartbase + "?chst=d_map_pin_letter_withshadow&chld=|FF66FF|202020", width: 27, height: 25} ],[ {url: codebase + "/images/m1.png", width: 27, height: 25}, {url: codebase + "/images/m2.png", width: 27, height: 25}, {url: codebase + "/images/m3.png", width: 27, height: 25}, {url: codebase + "/images/m4.png", width: 27, height: 25}, {url: codebase + "/images/m5.png", width: 27, height: 25} ],[ {url: codebase + "/images/people35.png", width: 27, height: 25}, {url: codebase + "/images/people45.png", width: 27, height: 25}, {url: codebase + "/images/people55.png", width: 27, height: 25} ],[ {url: codebase + "/images/conv30.png", width: 27, height: 25}, {url: codebase + "/images/conv40.png", width: 27, height: 25}, {url: codebase + "/images/conv50.png", width: 27, height: 25} ]]; // who does not like a good old fashioned cluster, cause thats what we have here var style = 0; var mcOptions = { gridSize: 30, maxZoom: 6, zoomOnClick: false, averageCenter: true, minimumClusterSize: 5, title: "Group of Pins", styles: styles[style] }; // functions to read xml data function makeRequest(url) { if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } if (xhr) { xhr.onreadystatechange = showContents; xhr.open("GET", url, true); xhr.send(null); } else { document.write("Error making the ajax request"); } } function showContents() { var xmldoc = ''; if (xhr.readyState === 4) { // Run on server (200) or local machine (0) if (xhr.status === 200 || xhr.status === 0) { xmldoc = xhr.responseXML; makeMarkers(xmldoc); } else { document.write("Unable to read the map pin data, result was - " + xhr.status); } } } // Create the map and load our data function initialize() { // create the map var latlng = new google.maps.LatLng(0, 0); var options = { zoom: 1, center: latlng, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE } }; map = new google.maps.Map(document.getElementById("map"), options); // load the members makeRequest("http://www.sagoingtonz.co.nz/forum/index.php?PHPSESSID=ubvpbtgadlko8ci1avth28h4j1&action=googlemap;sa=.xml"); // Our own initial state button since its gone walkies in the v3 api var reset = document.getElementById("googleMapReset"); reset.style.filter = "alpha(opacity=0)"; reset.style.mozOpacity = "0"; reset.style.opacity = "0"; } // Read the output of the marker xml function makeMarkers(xmldoc) { var markers = xmldoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; ++i) { var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = markers[i].childNodes[0].nodeValue; var label = markers[i].getAttribute("label"); var marker = createMarker(point, npic, label, html, i); } // send the markers array to the cluster script mc = new MarkerClusterer(map, gmarkers, mcOptions); google.maps.event.addListener(mc, "clusterclick", function(cluster) { if (infowindow) infowindow.close(); var clusterMarkers = cluster.getMarkers(); map.setCenter(cluster.getCenter()); // build the info window content var content = "
"; var numtoshow = Math.min(cluster.getSize(),10); for (var i = 0; i < numtoshow; ++i) { content = content + " " + clusterMarkers[i].title + "
"; } if (cluster.getSize() > numtoshow) content = content + "
Plus [" + (cluster.getSize() - numtoshow) + "] other Pins"; content = content + "
"; infowindow = new google.maps.InfoWindow; myLatlng = new google.maps.LatLng(cluster.getCenter().lat(), cluster.getCenter().lng()); infowindow.setPosition(myLatlng); infowindow.setContent(content); infowindow.open(map); }); // put the assembled sidebar_html contents into the sidebar div document.getElementById("googleSidebar").innerHTML = sidebar_html; } // Create a marker and set up the event window function createMarker(point, pic, name, html, i) { // map marker var marker = new google.maps.Marker({ position: point, map: map, icon: pic, clickable: true, title: name.replace(/\[b\](.*)\[\/b\]/gi, "$1") }); // listen for a marker click google.maps.event.addListener(marker, "click", function() { if (infowindow) infowindow.close(); infowindow = new google.maps.InfoWindow({content: html, maxWidth:240}); infowindow.open(map, marker); }); // save the info used to populate the sidebar gmarkers.push(marker); htmls.push(html); name = name.replace(/\[b\](.*)\[\/b\]/gi, "$1"); // add a line to the sidebar html sidebar_html += '' + name + '
'; // return the marker.... return marker; } // Picks up the sidebar click and opens the corresponding info window function finduser(i) { if (infowindow) infowindow.close(); infowindow = new google.maps.InfoWindow({content: htmls[i], maxWidth:240}); infowindow.open(map, gmarkers[i]); } function resetMap() { // reset the map to inital values infowindow.close(); map.setCenter(new google.maps.LatLng(0, 0)); map.setZoom(1); map.setMapTypeId(google.maps.MapTypeId.ROADMAP); } google.maps.event.addDomListener(window, "load", initialize);