|
|
Google maps V3 - sidebar list + category + color icons.........3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps Javascript API v3 Example: Marker Categories</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://www.geocodezip.com/scripts/downloadxml.js"></script> <title>Google Maps</title> <style type="text/css"> html, body { height: 100%; } </style> <script type="text/javascript"> //<![CDATA[ // this variable will collect the html which will eventually be placed in the side_bar var side_bar_html = ""; var gmarkers = []; var gicons = []; var map = null; var infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150,50) }); gicons["red"] = new google.maps.MarkerImage("http://www.geocodezip.com/mapIcons/marker_red.png", new google.maps.Size(20, 34), new google.maps.Point(0,0), new google.maps.Point(9, 34)); var iconImage = new google.maps.MarkerImage('http://www.geocodezip.com/mapIcons/marker_red.png', new google.maps.Size(20, 34), new google.maps.Point(0,0), new google.maps.Point(9, 34)); var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png', new google.maps.Size(37, 34), new google.maps.Point(0,0), new google.maps.Point(9, 34)); var iconShape = { coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0], type: 'poly' }; function getMarkerImage(iconColor) { if ((typeof(iconColor)=="undefined") || (iconColor==null)) { iconColor = "red"; } if (!gicons[iconColor]) { gicons[iconColor] = new google.maps.MarkerImage("http://www.geocodezip.com/mapIcons/marker_"+ iconColor +".png", // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(20, 34), // The origin for this image is 0,0. new google.maps.Point(0,0), // The anchor for this image is at 6,20. new google.maps.Point(9, 34)); } return gicons[iconColor]; } function category2color(category) { var color = "red"; switch(category) { case "theatre": color = "blue"; break; case "golf": color = "green"; break; case "info": color = "yellow"; break; default: color = "red"; break; } return color; } gicons["theatre"] = getMarkerImage(category2color("theatre")); gicons["golf"] = getMarkerImage(category2color("golf")); gicons["info"] = getMarkerImage(category2color("info")); // A function to create the marker and set up the event window function createMarker(latlng,name,html,category) { var contentString = html; var marker = new google.maps.Marker({ position: latlng, icon: gicons[category], shadow: iconShadow, map: map, title: name, zIndex: Math.round(latlng.lat()*-100000)<<5 }); // === Store the category and name info as a marker properties === marker.mycategory = category; marker.myname = name; gmarkers.push(marker); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); } // == shows all markers of a particular category, and ensures the checkbox is checked == function show(category) { for (var i=0; i<gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setVisible(true); } } // == check the checkbox == document.getElementById(category+"box").checked = true; } // == hides all markers of a particular category, and ensures the checkbox is cleared == function hide(category) { for (var i=0; i<gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setVisible(false); } } // == clear the checkbox == document.getElementById(category+"box").checked = false; // == close the info window, in case its open on a marker that we just hid infowindow.close(); } // == a checkbox has been clicked == function boxclick(box,category) { if (box.checked) { show(category); } else { hide(category); } // == rebuild the side bar makeSidebar(); } function myclick(i) { google.maps.event.trigger(gmarkers[i],"click"); } // == rebuilds the sidebar to match the markers currently displayed == function makeSidebar() { var html = ""; for (var i=0; i<gmarkers.length; i++) { if (gmarkers[i].getVisible()) { html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '</a><br>'; } } document.getElementById("side_bar").innerHTML = html; } function initialize() { var myOptions = { zoom: 11, center: new google.maps.LatLng(53.8363,-3.0377), mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map"), myOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // Read the data downloadUrl("http://www.geocodezip.com/categories.xml", function(doc) { var xml = xmlParse(doc); var markers = xml.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 google.maps.LatLng(lat,lng); var address = markers[i].getAttribute("address"); var name = markers[i].getAttribute("name"); var html = "<b>"+name+"</b><p>"+address; var category = markers[i].getAttribute("category"); // create the marker var marker = createMarker(point,name,html,category); } // == show or hide the categories initially == show("theatre"); hide("golf"); hide("info"); // == create the initial sidebar == makeSidebar(); }); } // This Javascript is based on code provided by the // Community Church Javascript Team // http://www.bisphamchurch.org.uk/ // http://econym.org.uk/gmap/ // from the v2 tutorial page at: // http://econym.org.uk/gmap/example_categories.htm //]]> </script> </head> <body style="margin:0px; padding:0px;" onload="initialize();"> <!-- you can use tables or divs for the overall layout --> <table border=1> <tr> <td> <div id="map" style="width: 550px; height: 450px"></div> </td> <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"> <div id="side_bar"></div> </td> </tr> </table> <form action="#"> Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /> Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /> Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br /> </form> <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again. </noscript> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-162157-1"; urchinTracker(); </script> </body> </html> |
| 
|
