Advertisement
Guest User

Untitled

a guest
Feb 6th, 2016
119
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.07 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  5. <title>Google Maps JavaScript API v3 Example: Marker Categories</title>
  6. <script type="text/javascript"
  7. src="http://maps.google.com/maps/api/js?sensor=false"></script>
  8. <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  9. </head>
  10. <body>
  11. <div id="map" style="width: 400px; height: 300px;"></div>
  12.  
  13. <input type="checkbox" value="Show Group 1" onclick="displayMarkers(this,1);">
  14. <input type="checkbox" value="Show Group 2" onclick="displayMarkers(this, 2);">
  15.  
  16. <script type="text/javascript">
  17.  
  18. var beaches = [
  19. ['Bondi Beach', -33.890542, 151.274856, 1,],
  20. ['Coogee Beach', -33.923036, 151.259052, 1],
  21. ['Cronulla Beach', -34.028249, 151.157507, 2],
  22. ['Manly Beach', -33.800101, 151.287478, 2],
  23. ['Maroubra Beach', -33.950198, 151.259302, 2]
  24. ];
  25.  
  26. var map = new google.maps.Map(document.getElementById('map'), {
  27. zoom: 10,
  28. center: new google.maps.LatLng(-33.88, 151.28),
  29. mapTypeId: google.maps.MapTypeId.ROADMAP
  30. });
  31.  
  32. var markers = [];
  33.  
  34. var i, newMarker;
  35.  
  36. for (i = 0; i < beaches.length; i++) {
  37. newMarker = new google.maps.Marker({
  38. position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
  39. map: map,
  40. title: beaches[i][0]
  41. });
  42.  
  43. newMarker.category = beaches[i][3];
  44. newMarker.setVisible(false);
  45.  
  46. markers.push(newMarker);
  47. }
  48.  
  49. function displayMarkers(obj,category) {
  50. var i;
  51.  
  52. for (i = 0; i < markers.length; i++)
  53. {
  54. if (markers[i].category === category) {
  55. if ($(obj).is(":checked")) {
  56.  
  57. markers[i].setVisible(true);
  58. } else {
  59. markers[i].setVisible(false);
  60. }
  61. }
  62. else
  63. {
  64. markers[i].setVisible(false);
  65. }
  66. }
  67.  
  68.  
  69. }
  70.  
  71. </script>
  72. </body>
  73. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement