Last active
April 20, 2017 02:19
-
-
Save animista01/c3963bb9e0cd7a03926d to your computer and use it in GitHub Desktop.
Show/remove markers from a Map by clicking checkboxes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Central Gmap</title> | |
| <script src="https://code.jquery.com/jquery-1.11.2.js"></script> | |
| <script src="https://maps.google.com/maps/api/js?sensor=true"></script> | |
| <script src="gmaps.js"></script> | |
| </head> | |
| <body> | |
| <div> | |
| <input type="checkbox" value="a" name="a" checked /> A | |
| <input type="checkbox" value="b" name="b" checked /> B | |
| <input type="checkbox" value="c" name="c" checked /> C | |
| </div> | |
| <div id="map" style="display: inline-block;width: 100%; height: 590px; margin: 0 auto;"></div> | |
| <script> | |
| var markers = { | |
| 'a': [ | |
| { | |
| lat: 10.9990, | |
| lng: -74.8129, | |
| title: 'El 1', | |
| moreContent: 'sddh gjsadhga shjgd ahjdahja hgjahgj dashdada' | |
| }, | |
| { | |
| lat: 10.9993, | |
| lng: -74.8250, | |
| title: 'El 3', | |
| moreContent: 'sdfj dfds hjfhj sdfhjsdfh fhdfsd' | |
| } | |
| ], | |
| 'b': [ | |
| { | |
| lat: 10.9986, | |
| lng: -74.7945, | |
| title: 'El 2', | |
| moreContent: 'qweq weuygw eu ygqwe yguq wyteqwyte' | |
| }, | |
| { | |
| lat: 10.9994, | |
| lng: -74.8000, | |
| title: 'El 5', | |
| moreContent: 'adsag hvdas gdsafgd tfsyadfadftaf tyatfda' | |
| } | |
| ], | |
| 'c': [ | |
| { | |
| lat: 11.0066, | |
| lng: -74.8200, | |
| title: 'El 4', | |
| moreContent: 'fsefdg ygusfgdsgf sfgsdgfdg sfghjdshfsf' | |
| } | |
| ] | |
| }; | |
| var gMarkers = []; | |
| var map = new GMaps({ | |
| el: '#map', | |
| lat: 10.999059, | |
| lng: -74.811426, | |
| zoom: 14 | |
| }); | |
| for(var key in markers){ | |
| if(markers.hasOwnProperty(key)){ | |
| var obj = markers[key]; | |
| gMarkers[key] = []; | |
| for(var prop in obj){ | |
| if(obj.hasOwnProperty(prop)){ | |
| marker = map.addMarker({ | |
| lat: obj[prop].lat, | |
| lng: obj[prop].lng, | |
| title: obj[prop].title, | |
| infoWindow: { | |
| content: obj[prop].moreContent | |
| } | |
| }); | |
| gMarkers[key].push(marker); | |
| } | |
| } | |
| } | |
| } | |
| console.log(gMarkers) | |
| $("input[type=checkbox]").click(function (){ | |
| var poi_type = $(this).val(); | |
| console.log(markers[poi_type]) | |
| if($(this).is(':checked')){ | |
| console.log('Checked') | |
| map.addMarkersOfType(poi_type); | |
| }else{ | |
| console.log('NO') | |
| map.removeMarkersOfType(poi_type); | |
| } | |
| }); | |
| GMaps.prototype.addMarkersOfType = function (poi_type){ | |
| // save the relevant map | |
| var theMap = this.map; | |
| // clear markers of this type | |
| gMarkers[poi_type] = []; | |
| // for each Gmaps marker | |
| $.each(markers[poi_type],function (index, obj){ | |
| // add the marker | |
| var marker = map.addMarker({ | |
| lat: obj.lat, | |
| lng: obj.lng, | |
| title: obj.title, | |
| infoWindow: { | |
| content: obj.moreContent | |
| } | |
| }); | |
| console.log(obj) | |
| console.log(marker) | |
| // save it as real marker | |
| gMarkers[poi_type].push(marker); | |
| }); | |
| } | |
| GMaps.prototype.removeMarkersOfType = function (poi_type){ | |
| // for each real marker of this type | |
| $.each(gMarkers[poi_type], function (index, obj){ | |
| // remove the marker | |
| obj.setMap(null); | |
| }); | |
| // clear markers of this type | |
| gMarkers[poi_type] = []; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment