javascript - Hide dynamic google map markers with checkbox selection -

javascript - Hide dynamic google map markers with checkbox selection -

i attempting create filter dynamic markers on google map. user selects markers filter various check box selections relating each marker category.

i advice on current code hoping quite close. aware there number of similar questions on here although seem follow xml google map tutorial not next , have taken json / $.each route rather generating xml , loops set markers position.

from reading related questions, have tried create array groups markers category , based on check boxes selected should hide or unhide these markers.

currently when run code checkboxes frozen on check , not uncheck. when remove onclick html issue resolved, although doesn't phone call funtion.

i javascript error togglegroup function not defined. don't understand why supposed defined checkbox id.

js

var customicons = []; customicons["1"] = 'img/32x32/border_edits/automotive.jpg'; customicons["2"] = 'img/32x32/border_edits/barpub.jpg'; customicons["3"] = 'img/32x32/border_edits/cinema.jpg'; var markergroups = { "1": [], "2": [], "3": [] }; $(document).on("pageshow","#map-page",function(){ if (navigator.geolocation) { navigator.geolocation.getcurrentposition(success); } else { error('geo location not supported'); } function success(position) { var coords = new google.maps.latlng(position.coords.latitude, position.coords.longitude); var options = { zoom: 16, center: coords, maptypecontrol: false, navigationcontroloptions: { style: google.maps.navigationcontrolstyle.small }, disabledefaultui:true, zoomcontrol:true, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map"), options); var marker = new google.maps.marker({ position: coords, icon: 'img/gps_marker.jpg', map: map, }); $.post( "getrow.php?getjson", function( info ) { var info = json.parse(data); console.log(data); $.each(data, function(index, value){ var id = value.site_id; var type = value.prime_category; var point = new google.maps.latlng(value.lat, value.lon); var name = value.site_name; var address = value.site_address; var icon = customicons[type] || {}; var marker = createmarker(point, name, address, type, id); }); }); function createmarker(point, name, address, type, id) { var marker = new google.maps.marker({ map: map, position: point, icon: customicons[type], id: id }); markergroups[type].push(marker); var html = "<b>" + name + "</b> <br/>" + address; google.maps.event.addlistener(marker, 'click', function() { infowindow.setcontent(html); infowindow.open(map, marker); }); homecoming marker; } function togglegroup(type){ if($('#'+type).is(':checked')){ for(var i=0;i<markergroups[type].length;i++){ markergroups[type][i].setvisible(true); } } else{ for(var i=0;i<markergroups[type].length;i++){ markergroups[type][i].setvisible(false); } } } } });

html

i have checkboxes in jquery mobile dialog page linked in header of map page

<div data-role="page" id="map-page"> <div data-role="header" id="appheader" data-position="fixed"> <h1> <a href="#preferences" data-role="button" class="ui-btn-right" data-rel="dialog" data-icon="gear" data-iconpos="notext" data-inline="true"></a> </h1> </div> <div id="appcontent"> <div id="map"> </div> </div> </div> <div data-role="page" id="preferences"> <div data-role="header"> <h1>filter</h1> </div> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"> <label for="1">automotive</label> <input type="checkbox" id="1" onclick="togglegroup(this.id)" checked> <label for="3">cinema</label> <input type="checkbox" id="3" onclick="togglegroup(this.id)" checked> <label for="5">dining out</label> <input type="checkbox" id="5" onclick="togglegroup(this.id)" checked> </div> </div> </div> </div>

css

html, body { margin: 0; width: 100%; height: 100%; } #appcontent{ width: 100%; height: 100%; } #map{ position: absolute; top: 40px; left: 0px; right: 0px; bottom: 0px; } #appheader{ position: absolute; top: 0px; left: 0px; right: 0px; height: 40px; background-color: #00a2e8; }

any help , advice appreciated.

i managed resolve problem. rather phone call function onclick of each checkbox in html. used $(":checkbox").change phone call function , utilize this.id define marker's type. @clayton leis suggestion.

js

function createmarker(point, name, address, type, id) { var marker = new google.maps.marker({ map: map, position: point, icon: customicons[type], id: id }); markergroups[type].push(marker); var html = "<b>" + name + "</b> <br/>" + address; google.maps.event.addlistener(marker, 'click', function() { infowindow.setcontent(html); infowindow.open(map, marker); }); homecoming marker; } $(":checkbox").change(function togglegroup(){ var type = this.id; if($('#'+type).is(':checked')){ for(var i=0;i<markergroups[type].length;i++){ markergroups[type][i].setvisible(true); } } else{ for(var i=0;i<markergroups[type].length;i++){ markergroups[type][i].setvisible(false); } } });

one remaining problem have checkboxes on dialog page using jquery mobile in html. when page closed refreshes html resets checkboxes. seems known problem dialog pages in jquery mobile when set checkbox code in map page code above works perfectly. help everyone.

javascript jquery html google-maps google-maps-api-3