Enabling Disabling Layers with Google Maps API

iratus · 04-15-2011, 09:19 PM

Hello I am very new to Programming (really amateur) and I have made a map with html and google maps api (javascript). I have some layers and I would like to enable and disable them within my map.

I have written some code but it doesn't seems to work. If anybody can help me I would really appreciate it !!!

HTML code (pats of it)

Code:

# <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
# <html xmlns="http://www.w3.org/1999/xhtml">  
# <head>  
# <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
# <title>Map</title>  
# <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />  
# </head>  
#   
# <body>  
# <h1>Everest Routes</h1>  
# <div id="map"></div>  
# <script type="text/javascript"  
#   
# src="http://maps.google.com/maps/api/js?sensor=false"></script>  
# <script type="text/javascript" src="js/map.js"></script>  
#   
# <div style="margin-right: 10px; height 50px">  
#     <form>  
#     <input type="checkbox" name="Everest_North_Ridge" value="Everest_North_Ridge" /> Everest_North_Ridge <br/>  
#     <input type="checkbox" name="Southest_Ridge_Route" value="Southest_Ridge_Route" /> Everest_North_Ridge <br/>  
#     <input type="checkbox" name="Everest_Eastern_Routes" value="Everest_Eastern_Routes" /> Everest_Eastern_Routes <br/>  
#     <input onclick="load_layers(Everst_North_Ridge.checked, Southest_Ridge_Route.checked, Everest_Eastern_Routes);" type="button" value="Dispay" />  
#   
# </div>  
#   
#   
# </body>  
# </html>

Javascript code

Code:

   1. function load_layers (cbstatus1, cbstatus2, cbstatus3){  
   2.  if (cbstatus1 == true)   
   3.  {ctaLayer2.setMap(map);  
   4.  }  
   5.  else   
   6.  {ctaLayer2.setMap(null);  
   7.  }  
   8. }  
   9.    
  10.   
  11.   
  12. (function() {  
  13. window.onload = function() {  
  14.   
  15. // Creating an object literal containing the properties  
  16. //you want to pass to the map  
  17.   
  18. var options = {  
  19. zoom: 14,  
  20. center: new google.maps.LatLng(27.98002,    86.92154),  
  21. mapTypeId: google.maps.MapTypeId.SATELLITE,  
  22.   
  23. //Scale bar  
  24.   
  25. scaleControl: true,  
  26.   
  27.   
  28. // Now we will play with the maptype terrain menu !!!  
  29.   
  30. mapTypeControl: true,  
  31. mapTypeControlOptions: {  
  32.   style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,  
  33.   position: google.maps.ControlPosition.TOP_RIGHT  
  34.   
  35. //Types of maps available to the user  
  36.   
  37. /* mapTypeIds: [ 
  38. google.maps.MapTypeId.ROADMAP, 
  39. google.maps.MapTypeId.SATELLITE 
  40. ]  */  
  41.   
  42.   
  43.   
  44.   }  
  45.   
  46.   
  47. //Navigation toolbar (zoom)  
  48.   
  49. // DEN LEITOURGEI !!!  
  50.   
  51. /* disableDefaultUI: true, 
  52. navigationControl: true, 
  53. navigationControlOptions: { 
  54.   position: google.maps.ControlPosition.TOP_RIGHT, 
  55. } */  
  56.   
  57.   
  58.   
  59.   
  60. };  
  61.   
  62. //Creating the map  
  63.   
  64.  var map = new google.maps.Map(document.getElementById('map'), options);  
  65.   
  66.       
  67.  var ctaLayer1 = new google.maps.KmlLayer('http://www.home.hs-karlsruhe.de/~madi1011/kml_EVEREST/Eastern_Routes.kmz');  
  68.   
  69.  ctaLayer1.setMap(map);    
  70.    
  71. var ctaLayer2 = new google.maps.KmlLayer('http://www.home.hs-karlsruhe.de/~madi1011/kml_EVEREST/Everest_North_Ridge.kmz');  
  72.   
  73.  ctaLayer2.setMap(map);    
  74.    
  75.  var ctaLayer3 = new google.maps.KmlLayer('http://www.home.hs-karlsruhe.de/~madi1011/kml_EVEREST/Southest_Ridge.kmz');  
  76.   
  77.  ctaLayer3.setMap(map);    
  78.   
  79. //Street view enable  
  80.   
  81. var options = {  
  82. zoom: 3,  
  83. center: new google.maps.LatLng(27.98002,    86.92154),  
  84. mapTypeId: google.maps.MapTypeId.SATELLITE,  
  85. streetViewControl: true  
  86. };  
  87.   
  88. //BackGround Color  
  89.   
  90. //Den leitourgei  
  91.   
  92. var options = {  
  93. zoom: 3,  
  94. center: new google.maps.LatLng(27.98002,    86.92154),  
  95. mapTypeId: google.maps.MapTypeId.SATELLITE,  
  96. backgroundColor: '#000000'  
  97. };  
  98.   
  99. // Adding a marker on the Summit Everest  
 100.   
 101. var marker = new google.maps.Marker({  
 102. position: new google.maps.LatLng(27.98002,  86.92154),  
 103. map: map,  
 104. // ADDING a title to the Marker  
 105. title: ' Summit Everest',  
 106. icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png'  
 107.   
 108. });  
 109.   
 110. // Create Infowindow on the Marker Everest  
 111.   
 112. var infowindow = new google.maps.InfoWindow({  
 113. content:'The Highest Summit on Earth'  
 114. });   
 115.   
 116. // Create 'LISTENER' so the Marker can saw info  
 117.   
 118. google.maps.event.addListener(marker, 'click' , function() {  
 119.   
 120. // call the open method od the InfoWindow  
 121.                 infowindow.open(map, marker);                                                          
 122.            });  
 123.   
 124.   
 125. // CREATE CUSTOM POLYLINES  
 126.   
 127. /* 
 128. var route = [ 
 129. new google.maps.LatLng(28.007662, 86.901643), 
 130. new google.maps.LatLng(27.986806, 86.880273), 
 131. new google.maps.LatLng(27.984982, 86.886762), 
 132. new google.maps.LatLng(28.006138, 86.859164), 
 133. new google.maps.LatLng(27.999829, 86.867133), 
 134. new google.maps.LatLng(28.004192, 86.884676) 
 135. ]; 
 136.  
 137.  
 138. //Creating the polyline object 
 139.  
 140. var polyline = new google.maps.Polyline({ 
 141. path: route, 
 142. strokeColor: "#ff0000", 
 143. strokeOpacity: 0.6, 
 144. strokeWeight: 5 
 145. }); 
 146.  
 147. // Adding the polyline to the map 
 148. polyline.setMap(map); 
 149.  
 150. */  
 151.   
 152.   
 153.   
 154. //TELOS TELOUS  
 155.   
 156. };  
 157. })();