//NOTE: to make the markers toggle I used code based on teh example at http://googlemapsapi.blogspot.com/2007/04/v277-gmarker-show-hide-and-ishidden.html var map; var gicons = []; gicons["internship"] = new GIcon(G_DEFAULT_ICON, "/images/icons/map-icons/internships-new/image.png"); gicons["supported"] = new GIcon(G_DEFAULT_ICON, "/images/icons/map-icons/placements-new/image.png"); gicons["internship"].iconSize = new GSize(37, 58); gicons["internship"].shadowSize = new GSize(66, 58); gicons["internship"].iconAnchor = new GPoint(19, 58); gicons["internship"].infoWindowAnchor = new GPoint(19, 25); gicons["internship"].printImage = '/images/icons/map-icons/internships-new/printImage.gif'; gicons["internship"].mozPrintImage = '/images/icons/map-icons/internships-new/mozPrintImage.gif'; gicons["internship"].printShadow = '/images/icons/map-icons/internshipas-new/printShadow.gif'; gicons["internship"].transparent = '/images/icons/map-icons/internships-new/transparent.png'; gicons["internship"].imageMap = [23, 0, 25, 1, 27, 2, 29, 3, 30, 4, 31, 5, 32, 6, 33, 7, 33, 8, 34, 9, 34, 10, 35, 11, 35, 12, 35, 13, 35, 14, 36, 15, 36, 16, 36, 17, 36, 18, 36, 19, 36, 20, 35, 21, 35, 22, 35, 23, 35, 24, 34, 25, 34, 26, 33, 27, 33, 28, 32, 29, 31, 30, 30, 31, 29, 32, 28, 33, 27, 34, 26, 35, 25, 36, 24, 37, 23, 38, 22, 39, 22, 40, 21, 41, 21, 42, 20, 43, 20, 44, 20, 45, 19, 46, 19, 47, 19, 48, 18, 49, 18, 50, 18, 51, 18, 52, 18, 53, 18, 54, 18, 55, 18, 56, 18, 57, 18, 57, 18, 56, 18, 55, 17, 54, 17, 53, 17, 52, 17, 51, 17, 50, 17, 49, 16, 48, 16, 47, 16, 46, 16, 45, 15, 44, 15, 43, 14, 42, 14, 41, 13, 40, 13, 39, 12, 38, 11, 37, 11, 36, 10, 35, 9, 34, 7, 33, 6, 32, 5, 31, 4, 30, 3, 29, 3, 28, 2, 27, 1, 26, 1, 25, 1, 24, 0, 23, 0, 22, 0, 21, 0, 20, 0, 19, 0, 18, 0, 17, 0, 16, 0, 15, 0, 14, 0, 13, 0, 12, 1, 11, 1, 10, 2, 9, 2, 8, 3, 7, 4, 6, 4, 5, 5, 4, 7, 3, 8, 2, 10, 1, 12, 0]; gicons["supported"].iconSize = new GSize(37, 58); gicons["supported"].shadowSize = new GSize(66, 58); gicons["supported"].iconAnchor = new GPoint(19, 58); gicons["supported"].infoWindowAnchor = new GPoint(19, 25); gicons["supported"].printImage = '/images/icons/map-icons/placements-new/printImage.gif'; gicons["supported"].mozPrintImage = '/images/icons/map-icons/placements-new/mozPrintImage.gif'; gicons["supported"].printShadow = '/images/icons/map-icons/placements-new/printShadow.gif'; gicons["supported"].transparent = '/images/icons/map-icons/placements-new/transparent.png'; gicons["supported"].imageMap = [23, 0, 25, 1, 27, 2, 29, 3, 30, 4, 31, 5, 32, 6, 33, 7, 33, 8, 34, 9, 34, 10, 35, 11, 35, 12, 35, 13, 35, 14, 36, 15, 36, 16, 36, 17, 36, 18, 36, 19, 36, 20, 35, 21, 35, 22, 35, 23, 35, 24, 34, 25, 34, 26, 33, 27, 33, 28, 32, 29, 31, 30, 30, 31, 29, 32, 28, 33, 27, 34, 26, 35, 25, 36, 24, 37, 23, 38, 22, 39, 22, 40, 21, 41, 21, 42, 20, 43, 20, 44, 20, 45, 19, 46, 19, 47, 19, 48, 18, 49, 18, 50, 18, 51, 18, 52, 18, 53, 18, 54, 18, 55, 18, 56, 18, 57, 18, 57, 18, 56, 18, 55, 17, 54, 17, 53, 17, 52, 17, 51, 17, 50, 17, 49, 16, 48, 16, 47, 16, 46, 16, 45, 15, 44, 15, 43, 14, 42, 14, 41, 13, 40, 13, 39, 12, 38, 11, 37, 11, 36, 10, 35, 9, 34, 7, 33, 6, 32, 5, 31, 4, 30, 3, 29, 3, 28, 2, 27, 1, 26, 1, 25, 1, 24, 0, 23, 0, 22, 0, 21, 0, 20, 0, 19, 0, 18, 0, 17, 0, 16, 0, 15, 0, 14, 0, 13, 0, 12, 1, 11, 1, 10, 2, 9, 2, 8, 3, 7, 4, 6, 4, 5, 5, 4, 7, 3, 8, 2, 10, 1, 12, 0]; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(33, 105), 2); map.addControl(new GSmallMapControl()); map.addMapType(G_NORMAL_MAP); map.setMapType(G_NORMAL_MAP); addMarkersFromXML(); } } function addMarkersFromXML() { var batch = []; mgr = new MarkerManager(map); var request = GXmlHttp.create(); request.open('GET', '/xml/tefl-internships.xml?=ud-2', true); request.onreadystatechange = function () { if (request.readyState == 4 && request.status == 200) { var xmlDoc = request.responseXML; var xmlrows = xmlDoc.documentElement.getElementsByTagName("Row"); for (var i = 0; i < xmlrows.length; i++) { var xmlrow = xmlrows[i]; //alert(xmlrows.length) //var type = markers[i].getAttribute("type"); var xmlcellLongitude = xmlrow.getElementsByTagName("Longitude")[0]; var xmlcellLatitude = xmlrow.getElementsByTagName("Latitude")[0]; var point = new GLatLng(parseFloat(xmlcellLatitude.firstChild.data), parseFloat(xmlcellLongitude.firstChild.data)); //get the type title var xmlcellInfoTitle = xmlrow.getElementsByTagName("Info_Title")[0]; var celltextInfoTitle = xmlcellInfoTitle.firstChild.data; //get the Location name var xmlcellLocationName = xmlrow.getElementsByTagName("Location_Name")[0]; var celltextLocationName = xmlcellLocationName.firstChild.data; //get the Page URL var xmlcellPageLink = xmlrow.getElementsByTagName("Page_Url")[0]; var celltextPageLink = xmlcellPageLink.firstChild.data; //get the Contract Length var xmlcellSalary = xmlrow.getElementsByTagName("Salary")[0]; var celltextSalary = xmlcellSalary.firstChild.data; //get the Quick Info var xmlcellQuickInfo = xmlrow.getElementsByTagName("Quick_Info")[0]; var celltextQuickInfo = xmlcellQuickInfo.firstChild.data; //get the Icon Type var xmlcellIconType = xmlrow.getElementsByTagName("Icon_Type")[0]; var icontype = xmlcellIconType.firstChild.data; var htmlString = "

" + celltextInfoTitle + "

" + "

Location: " + celltextLocationName + "
" + "Page link: Click here to visit the page
" + "Salary: " + celltextSalary + "

"; var marker = createMarker(point, htmlString, icontype); batch.push(marker); } mgr.addMarkers(batch, 2); mgr.refresh(); } } request.send(null); } //create an array to sort the markers into groups var markerGroups = { "internship": [], "supported": [] }; function createMarker(point, htmlString, icontype) { var marker = new GMarker(point, gicons[icontype]); //push the markers into their relevant groups in the 'markerGroups' array, based on their from the XML //var = icontype; is set above (on about line 95) to be the same as from the XML markerGroups[icontype].push(marker); GEvent.addListener(marker, "click", function () { marker.openInfoWindowHtml(htmlString); }); return marker; } /* ==================================================================================== function called to show/hide the markers on the map. 'type' is passed directly from an onClick even in the template html, and must match the node from the XML ==================================================================================== */ function toggleGroup(type) { for (var i = 0; i < markerGroups[type].length; i++) { var marker = markerGroups[type][i]; if (marker.isHidden()) { marker.show(); } else { marker.hide(); } } } /* ==================================================================================== A side effect of using MarkerManager.js means that when you zoom the map in or out any hidden markers will show again. The following code is a hack found at... http://www.svennerberg.com/2009/06/dynamically-toggle-markers-in-google-maps/ example at http://www.svennerberg.com/examples/toggle_markers/markermanager_fixed.html ...which gets around this ==================================================================================== */ /* Prototyping the show/hide/isHidden methods of GMarker */ // the hide() method saves the markers current position and then // positions the marker outside the map GMarker.prototype.hide = function () { if (this.getPoint().lat() < 90) { try { this.savePoint = this.getPoint(); this.setPoint(new GLatLng(90, 0)); } catch(e) {} } } // the show() method puts the marker back in the original position GMarker.prototype.show = function () { if (this.getPoint().lat() == 90) { if (this.savePoint) { try { this.setPoint(this.savePoint); this.savePoint = null; } catch(e) {} } } } // the isHidden() method checks if the marker is put outside the map and if it does // returns true GMarker.prototype.isHidden = function () { if (this.getPoint().lat() == 90) { return true; } else { return false; } } /* ============================================================================ Now for some jQuery for the toggle buttons ============================================================================ */ jQuery(function () { //set the Title attribute of each in the toggle section jQuery(".map-key-toggles img").each(function () { jQuery(this).attr("title", "Hide all " + jQuery(this).attr("alt") + " markers"); }); //toggle the visibilty of each toggleGroup button and alter it's Title attribute depending upon it's state jQuery(".map-key-toggles img").toggle( function () { jQuery(this).fadeTo("fast", 0.33); jQuery(this).attr("title", "Show all " + jQuery(this).attr("alt") + " markers") }, function () { jQuery(this).fadeTo("fast", 1.00); jQuery(this).attr("title", "Hide all " + jQuery(this).attr("alt") + " markers") }); });