javascript - Show and hide marker on google map -
i trying develop map show/hide marker feature project. don't have proper knowledge of javascript. looking on google while now. , saw many posts related this.now using code post shows here
in post map fine there lack in post.
it shows marker doesn't hide on clicking on checkbox again.
it shows 1 category @ time
code:
<!doctype html> <html> <head> <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> </head> <body> <div id="map" style="width: 400px; height: 300px;"></div> <input type="checkbox" value="show group 1" onclick="displaymarkers(1);"> <input type="checkbox" value="show group 2" onclick="displaymarkers(2);"> <script type="text/javascript"> var beaches = [ ['bondi beach', -33.890542, 151.274856, 1,], ['coogee beach', -33.923036, 151.259052, 1], ['cronulla beach', -34.028249, 151.157507, 2], ['manly beach', -33.800101, 151.287478, 2], ['maroubra beach', -33.950198, 151.259302, 2] ]; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 10, center: new google.maps.latlng(-33.88, 151.28), maptypeid: google.maps.maptypeid.roadmap }); var markers = []; var i, newmarker; (i = 0; < beaches.length; i++) { newmarker = new google.maps.marker({ position: new google.maps.latlng(beaches[i][1], beaches[i][2]), map: map, title: beaches[i][0] }); newmarker.category = beaches[i][3]; newmarker.setvisible(false); markers.push(newmarker); } function displaymarkers(category) { var i; (i = 0; < markers.length; i++) { if (markers[i].category === category) { markers[i].setvisible(true); } else { markers[i].setvisible(false); } } } </script> </body> </html>
please check code should working you. here need add jquery version file . , check whether checkbox click @ time need setvisible true other wise becomes false check code try this,
<!doctype html> <html> <head> <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 src="http://code.jquery.com/jquery-2.2.0.min.js"></script> </head> <body> <div id="map" style="width: 400px; height: 300px;"></div> <input type="checkbox" value="show group 1" onclick="displaymarkers(this,1);"> <input type="checkbox" value="show group 2" onclick="displaymarkers(this, 2);"> <script type="text/javascript"> var beaches = [ ['bondi beach', -33.890542, 151.274856, 1,], ['coogee beach', -33.923036, 151.259052, 1], ['cronulla beach', -34.028249, 151.157507, 2], ['manly beach', -33.800101, 151.287478, 2], ['maroubra beach', -33.950198, 151.259302, 2] ]; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 10, center: new google.maps.latlng(-33.88, 151.28), maptypeid: google.maps.maptypeid.roadmap }); var markers = []; var i, newmarker; (i = 0; < beaches.length; i++) { newmarker = new google.maps.marker({ position: new google.maps.latlng(beaches[i][1], beaches[i][2]), map: map, title: beaches[i][0] }); newmarker.category = beaches[i][3]; newmarker.setvisible(false); markers.push(newmarker); } function displaymarkers(obj,category) { var i; (i = 0; < markers.length; i++) { if (markers[i].category === category) { if ($(obj).is(":checked")) { markers[i].setvisible(true); } else { markers[i].setvisible(false); } } else { markers[i].setvisible(false); } } } </script> </body> </html> 
Comments
Post a Comment