Group markers for categories to show and hide

Question

I add markers to the google map with the following:

function addMarkersToMap(map) { // trigger resize on map in case canvas size is different google.maps.event.trigger(map, 'resize'); // remove existing markers google.maps.Map.prototype.clearMarkers(); // create a new bounds object (don't want existing bounds) var bounds = new google.maps.LatLngBounds(); // If there is a map center, use it to center the map $('.mapCenter').each(function() { var lat = $(this).find('[itemprop="latitude"]').attr('content'); var lng = $(this).find('[itemprop="longitude"]').attr('content'); map.setCenter(new google.maps.LatLng(lat, lng)); }); $('[itemtype="http://schema.org/Place"], [itemtype="http://schema.org/LocalBusiness"]').each(function() { var title = $(this).find('[itemprop="name"]').text(); var contentString = $(this).html(); var lat = $(this).find('[itemprop="latitude"]').attr('content'); var lng = $(this).find('[itemprop="longitude"]').attr('content'); var icon = $(this).attr('data-class'); var category = $(this).find('[itemprop="category"]').attr('content'); var marker = addMarker(map, title, contentString, lat, lng, icon, category); bounds.extend(marker.position); }); // add kml $('.MapHolder[data-url]').each(function() { var kml = $(this).attr('data-url'); var kmlLayer = new google.maps.KmlLayer(kml); kmlLayer.setMap(map); }); if(!bounds.isEmpty()) { map.fitBounds(bounds); } } function addMarker(map, title, contentString, lat, lng, icon, category) { var image; var shadow; var shape; if (icon) { image = new google.maps.MarkerImage( icon , new google.maps.Size(31, 41), new google.maps.Point(0,0), new google.maps.Point(15, 40)); } var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), map: map, title: title, icon: image, shape: shape, shadow: shadow }); if(contentString != '') { google.maps.event.addListener(marker, 'click', function() { infowindow.setContent($('<div>' + contentString + '</div>').ajaxify().get(0)); infowindow.open(map, marker); }); } return marker; } 

I want to be able to specify a category for each of these markers so that I can switch the visibility of markers based on the category (i.e. show / hide objects of interest or show / hide public toilets, etc.).

How can I modify my existing code to achieve what I am after?

Answer 1

Here is an example (migrated from the Mike Williams v2 tutorial) that does this:

http://www.geocodezip.com/v3_MW_example_categories.html

code snippet:

 // 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://maps.google.com/mapfiles/ms/micons/red.png", // This marker is 32 pixels wide by 32 pixels tall. new google.maps.Size(32, 32), // The origin for this image is 0,0. new google.maps.Point(0, 0), // The anchor for this image is at 16,32. new google.maps.Point(16, 32)); // Marker sizes are expressed as a Size of X,Y // where the origin of the image (0,0) is located // in the top left of the image. // Origins, anchor positions and coordinates of the marker // increase in the X direction to the right and in // the Y direction down. var iconImage = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/red.png', // This marker is 32 pixels wide by 32 pixels tall. new google.maps.Size(32, 32), // The origin for this image is 0,0. new google.maps.Point(0, 0), // The anchor for this image is at 16,32. new google.maps.Point(16, 32)); // Shapes define the clickable region of the icon. // The type defines an HTML &lt;area&gt; element 'poly' which // traces out a polygon as a series of X,Y points. The final // coordinate closes the poly by connecting to the first // coordinate. 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://maps.google.com/mapfiles/ms/micons/" + iconColor + ".png", // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(32, 32), // 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(16, 32)); } 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], 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("categories.xml", function(doc) { var xml = xmlParse(xmlData); 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(); // }); } google.maps.event.addDomListener(window, 'load', initialize); var xmlData = '<markers> <marker name="Grand Theatre" address="33 Church St, Blackpool, Lancashire, FY1 1HT" lng="-3.053102" lat="53.817260" category="theatre" /> <marker name="Claremont Theatre Club" address="Burwood Dr, Blackpool, Lancashire, FY3 8NS" lng="-3.049690" lat="53.829649" category="theatre" /> <marker name="Pendle Productions" address="249 Hawes Side La, Blackpool, Lancashire, FY4 4AA" lng="-3.030698" lat="53.794399" category="theatre" /> <marker name="Tram Shed Theatre" address="7 Moor Pk Av, Blackpool, Lancashire, FY2 0LT" lng="-3.034974" lat="53.845938" category="theatre" /> <marker name="Thornton Little Theatre" address="Fleetwood Road North, Thornton Cleveleys, FY5 3SZ" lng="-3.010607" lat="53.872058" category="theatre" /> <marker name="Barbara Jackson Arts" address="Rossall La, Fleetwood, Lancashire, FY7 8JP" lng="-3.033960" lat="53.897928" category="theatre" /> <marker name="North Shore Golf Club" address="Devonshire Rd, Blackpool, Lancashire, FY2 0RD" lng="-3.043305" lat="53.839898" category="golf" /> <marker name="St Annes Old Links" address="Highbury Road East, Lytham St. Annes, Lancashire, FY8 2LD" lng="-3.038407" lat="53.762917" category="golf" /> <marker name="Fairhaven Golf Club" address="Oakwood Av, Lytham St. Annes, Lancashire, FY8 4JU" lng="-2.983218" lat="53.742781" category="golf" /> <marker name="Green Drive Golf Club" address="Ballam Rd, Lytham St. Annes, Lancashire, FY8 4LE" lng="-2.959530" lat="53.745971" category="golf" /> <marker name="Fleetwood Golf Club" address="Princes Wy, Fleetwood, Lancashire, FY7 8AF" lng="-3.042973" lat="53.917606" category="golf" /> <marker name="Knott End Golf Club" address="Wyre Side, Knott End-on-Sea, Poulton-le-Fylde, Lancashire, FY6 0AA" lng="-2.997062" lat="53.923200" category="golf" /> <marker name="Tourist Information 1" address="1 Clifton St, Blackpool, Lancashire, FY1 1LY" lng="-3.054529" lat="53.818775" category="info" /> <marker name="Tourist Information 2" address="Thornton-Cleveleys, Lancashire, FY5 1WA" lng="-3.042989" lat="53.876079" category="info" /> <marker name="Tourist Information 3" address="Victoria Rd West, Thornton-Cleveleys, Lancashire, FY5 1AJ" lng="-3.041668" lat="53.877403" category="info" /> <marker name="Tourist Information 4" address="St. Annes Rd West, Lytham St. Annes, Lancashire, FY8 1SA" lng="-3.031074" lat="53.752122" category="info" /> <marker name="Tourist Information 5" address="The Esplanade, Fleetwood, Lancashire, FY7 6DL" lng="-3.006366" lat="53.926970" category="info" /> <marker name="Tourist Information 6" address="10-12 York St, Blackpool, Lancashire, FY1 5AQ" lng="-3.052919" lat="53.810556" category="info" /></markers>'; function xmlParse(str) { if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } if (typeof DOMParser != 'undefined') { return (new DOMParser()).parseFromString(str, 'text/xml'); } return createElement('div', null); } 

 html, body { height: 100%; } 

 <script src="http://maps.google.com/maps/api/js"></script> <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')" />&nbsp;&nbsp; Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" />&nbsp;&nbsp; Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /> <br /> </form>