Wie kann ich einen Google Maps Layer ein- oder ausblenden?
Ich habe einen vereinfachten Testfall und einen Screenshot vorbereitet.
Ich glaube, ich vermisse ein kleines bisschen, nur ein paar Zeilen Code.
Ich habe 2 Overlays (dieWetter und Wolken) in meinem JavaScript Google Map und möchte diese ausblenden oder einblenden, wenn ein entsprechendes Kontrollkästchen angeklickt wird:
Hier ist der Testfall, fügen Sie ihn einfach in eine .html-Datei ein und es wird ausgeführt:
<code><!DOCTYPE HTML> <html> <head> <style type="text/css"> h1,p { text-align: center; } #map { width: 700px; height: 400px; margin-left: auto; margin-right: auto; background-color: #CCCCFF; } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de&libraries=weather"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function() { findCity('Berlin'); $('#weather_box,#clouds_box').click(function(){ alert('How to hide/show layers? Checked: ' + $(this).is(':checked')); }); }); function createMap(center) { var opts = { zoom: 6, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }; return new google.maps.Map(document.getElementById('map'), opts); } function findCity(city) { var gc = new google.maps.Geocoder(); gc.geocode({address: city}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var pos = results[0].geometry.location; var map = createMap(pos); var marker = new google.maps.Marker({ map: map, title: city, position: pos, animation: google.maps.Animation.DROP }); var weatherLayer = new google.maps.weather.WeatherLayer({ temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS }); weatherLayer.setMap(map); //var cloudLayer = new google.maps.weather.CloudLayer(); //cloudLayer.setMap(map); } }); } </script> </head> <body> <h1>Berlin</h1> <p>Show: <label><input type="checkbox" id="weather_box" checked>weather</label> <label><input type="checkbox" id="clouds_box">clouds</label> </p> <div id="map"></div> </body> </html> </code>
AKTUALISIEREN: Danke, hier eine funktionierende Version für alle
<code><!DOCTYPE HTML> <html> <head> <style type="text/css"> h1,p { text-align: center; } #map { width: 700px; height: 400px; margin-left: auto; margin-right: auto; background-color: #CCCCFF; } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de&libraries=weather"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> var map; var WeatherLayer; var CloudsLayer; $(function() { findCity('Berlin'); }); function createMap(center) { var opts = { zoom: 6, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }; return new google.maps.Map(document.getElementById('map'), opts); } function findCity(city) { var gc = new google.maps.Geocoder(); gc.geocode({address: city}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var pos = results[0].geometry.location; map = createMap(pos); var marker = new google.maps.Marker({ map: map, title: city, position: pos, animation: google.maps.Animation.DROP }); weatherLayer = new google.maps.weather.WeatherLayer({ temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS }); weatherLayer.setMap(map); cloudsLayer = new google.maps.weather.CloudLayer(); //cloudsLayer.setMap(map); $('#weather_box').click(function(){ weatherLayer.setMap($(this).is(':checked') ? map : null); }); $('#clouds_box').click(function(){ cloudsLayer.setMap($(this).is(':checked') ? map : null); }); $('#weather_box,#clouds_box').removeAttr('disabled'); } }); } </script> </head> <body> <h1>Berlin</h1> <p>Show: <label><input type="checkbox" id="weather_box" disabled="true" checked>weather</label> <label><input type="checkbox" id="clouds_box" disabled="true">clouds</label> </p> <div id="map"></div> </body> </html> </code>