|
|
Google maps V2 - sidebar list + category + color icons.........2
<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>LabeledMarker Example: Toggling Marker Groups & Labels</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow" type="text/javascript"></script> <script type="text/javascript"> document.write('<script type="text/javascript" src="http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js"><' + '/script>'); </script> <script type="text/javascript"> //<![CDATA[ var iconBlue = new GIcon(); iconBlue.image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png'; iconBlue.shadow = ''; iconBlue.iconSize = new GSize(32, 32); iconBlue.shadowSize = new GSize(22, 20); iconBlue.iconAnchor = new GPoint(16, 16); iconBlue.infoWindowAnchor = new GPoint(5, 1); var iconRed = new GIcon(); iconRed.image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/bluecirclemarker.png'; iconRed.shadow = ''; iconRed.iconSize = new GSize(32, 32); iconRed.shadowSize = new GSize(22, 20); iconRed.iconAnchor = new GPoint(16, 16); iconRed.infoWindowAnchor = new GPoint(5, 1); var customIcons = []; customIcons["restaurant"] = iconBlue; customIcons["bar"] = iconRed; var markerGroups = { "restaurant": [], "bar": []}; function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(47.614495, -122.341861), 13); document.getElementById("restaurantCheckbox").checked = true; document.getElementById("barCheckbox").checked = true; document.getElementById("labelsCheckbox").checked = true; GDownloadUrl("http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/1.4/examples/markerdata.xml", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var label = markers[i].getAttribute("label"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createMarker(point, name, label, address, type); map.addOverlay(marker); } }); } } function createMarker(point, name, label, address, type) { var marker = new LabeledMarker(point, {icon: customIcons[type], labelText: label, labelOffset: new GSize(-6, -10)}); markerGroups[type].push(marker); var html = "<b>" + name + "</b> <br/>" + address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } 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(); } } } function toggleLabels() { var showLabels = document.getElementById("labelsCheckbox").checked; for (groupName in markerGroups) { for (var i = 0; i < markerGroups[groupName].length; i++) { var marker = markerGroups[groupName][i]; marker.setLabelVisibility(showLabels); } } } //]]> </script> </head> <body style="font-family:Arial, sans serif" onload="load();" onunload="GUnload();"> <input type="checkbox" id="labelsCheckbox" onclick="toggleLabels()" CHECKED /> Show Labels <br/> <div id="map" style="float:left; width: 600px; height: 500px; border: 1px solid black"></div> <div id="sidebar" style="float:left; width: 120px; height: 250px; border: 1px solid black"> <input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('restaurant')" CHECKED /> Restaurants <br/> <input type="checkbox" id="barCheckbox" onclick="toggleGroup('bar')" CHECKED/> Bars </div> </body> </html> |
| 
|
