jquery - Hide/Show Google Maps markers based on their category or group -
i'm in process of creating google map can show users groups of markers. restaurants or parks in area. i've been able create set of restaurants , set of parks, each own marker color. can hide or show of markers clicking text under map. want separate markers categories can hide or show them based off checkbox. code below, here things i'd do:
- the map should blank no markers default
- i can separate markers own categories , hide , show each category
- multiple categories can shown @ time
here code
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>google maps multiple markers</title> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script></script> </head> <body> <div id="map" style="width: 100%; height: 650px;"></div> <p><a onclick="clearmarkers();">clear markers</a></p> <p><a onclick="showrestaurants();">show markers</a></p> <script type="text/javascript"> //restaurants markers var restaurants = [ ['melt bar , grill', 41.485345, -81.799047], ['sloane pub', 41.486182, -81.824178], ['spitfire salon', 41.479670, -81.768430], ['mahall\'s', 41.476989, -81.781094], ['szechwan garden', 41.485615, -81.787890] ]; //parks markers var parks = [ ['lakewood park', 41.494457, -81.797605], ['madison park', 41.476969, -81.781929], ['tuland park', 41.464052, -81.788041] ]; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 14, center: new google.maps.latlng(41.485345, -81.799047), maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); var marker, i; var markers = new array(); //create , place restaurant markers (i = 0; < restaurants.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(restaurants[i][1], restaurants[i][2]), map: map, icon: 'images/markers/red_marker.png' }); markers.push(marker); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(restaurants[i][0]); infowindow.open(map, marker); } })(marker, i)); } //create , place parks markers (i = 0; < parks.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(parks[i][1], parks[i][2]), map: map, icon: 'images/markers/blue_marker.png' }); markers.push(marker); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(parks[i][0]); infowindow.open(map, marker); } })(marker, i)); } // sets map on markers in array. function setallmap(map) { (var = 0; < markers.length; i++) { markers[i].setmap(map); } } // removes markers map, keeps them in array. function clearmarkers() { setallmap(null); } // shows markers in array. function showrestaurants() { setallmap(map); } </script> </body> </html>
a google.maps.mvcobject nice feature implement this.
most of google.maps-classes create mvcobjects, marker mvcobject.
the advantage: may bind property of 1 mvcobject property of mvcobject. when property changed in source-object updated in target-object.
so you'll need mvcobject each category. set property(e.g. map) of mvcobject either google.maps.map or null , bind map-property of markers map-property of category-mvcobject, , it's done.
to hide or show markers set map-property of category-mvcobjects particular value(maps-instance or null).
sample-implementation(i've modified structure of categories little bit simplify loops, each category checkbox created controls display of related markers):
$(window).load(function (){ var places={ restaurant:{ label:'restaurants', //the category may default-checked when want //uncomment next line //checked:true, icon: 'http://maps.gstatic.com/mapfiles/markers2/marker.png' , items: [ ['melt bar , grill', 41.485345, -81.799047], ['sloane pub', 41.486182, -81.824178], ['spitfire salon', 41.479670, -81.768430], ['mahall\'s', 41.476989, -81.781094], ['szechwan garden', 41.485615, -81.787890] ] }, park:{ label:'parks', //the category may default-checked when want //uncomment next line //checked:true, icon:'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png', items: [ ['lakewood park', 41.494457, -81.797605], ['madison park', 41.476969, -81.781929], ['tuland park', 41.464052, -81.788041] ] } }, map = new google.maps.map( document.getelementbyid('map'), { zoom: 14, center: new google.maps.latlng(41.485345, -81.799047), } ), infowindow = new google.maps.infowindow(), // div place buttons ctrl=$('<div/>').css({background:'#fff', border:'1px solid #000', padding:'4px', margin:'2px', textalign:'center' }); //show all-button ctrl.append($('<input>',{type:'button',value:'show all'}) .click(function(){ $(this).parent().find('input[type="checkbox"]') .prop('checked',true).trigger('change'); })); ctrl.append($('<br/>')); //clear all-button ctrl.append($('<input>',{type:'button',value:'clear all'}) .click(function(){ $(this).parent().find('input[type="checkbox"]') .prop('checked',false).trigger('change'); })); ctrl.append($('<hr/>')); //now loop on categories $.each(places,function(c,category){ //a checkbox fo category var cat=$('<input>',{type:'checkbox'}).change(function(){ $(this).data('goo').set('map',(this.checked)?map:null); }) //create data-property google.maps.mvcobject //this mvc-object show/hide category .data('goo',new google.maps.mvcobject) .prop('checked',!!category.checked) //this initialize map-property of mvcobject .trigger('change') //label checkbox .appendto($('<div/>').css({whitespace:'nowrap',textalign:'left'}) .appendto(ctrl)) .after(category.label); //loop on items(markers) $.each(category.items,function(m,item){ var marker=new google.maps.marker({ position:new google.maps.latlng(item[1],item[2]), title:item[0], icon:category.icon }); //bind map-property of marker map-property //of mvcobject has been stored checkbox-data marker.bindto('map',cat.data('goo'),'map'); google.maps.event.addlistener(marker,'click',function(){ infowindow.setcontent(item[0]); infowindow.open(map,this); }); }); }); //use buttons-div map-control map.controls[google.maps.controlposition.top_right].push(ctrl[0]); } ); 
Comments
Post a Comment