Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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;
- for (i = 0; i < 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;
- for (i = 0; i < 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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement