Layer zu Google Map hinzufügen (Umschaltfläche für Traffic-Layer hinzufügen)

Question

Ich möchte die Google Maps-Verkehrsebene umschalten. Ich habe diesen Beitrag gefunden: Adding Custom Control to Google Map (Adding toggle for traffic layer)

Ich habe versucht, den DOM-Listener an verschiedenen Stellen in meinem Code ohne Wirkung zu setzen. Mit Firebug sehe ich keine Fehler, aber die Traffic-Schicht schaltet nicht um.

Ich konnte in der Verkehrsebene hart Code, so dass ich weiß, dass es funktionieren kann.

Hier ist mein Code: Eyehike Wanderung Locator </script> ->

 <script type="text/javascript"> 

    var m_icon; 
    var m_shadow; 
    var mrk_id; 
    var thumnbnail; 
    var trafficLayer; 
    function toggleTraffic(){ 
     if(trafficLayer.getMap() == null){ 
      //traffic layer is disabled.. enable it 
      trafficLayer.setMap(map); 
     } else { 
      //traffic layer is enabled.. disable it 
      trafficLayer.setMap(null);    
     } 
    } 

    function load() { 
     var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(44.50, -115.00), 
      zoom: 6, 
      mapTypeId: 'hybrid' 
     }); // The higher the zoom number, the more detailed the map. 



//  var trafficLayer = new google.maps.TrafficLayer(); 
//  trafficLayer.setMap(map); 

     var infoWindow = new google.maps.InfoWindow; 

     // Change this depending on the name of your PHP file 
     downloadUrl("marker_php_07_16.php", function(data) { 

      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
       var name = markers[i].getAttribute("name"); 
       var address = markers[i].getAttribute("address"); 
       var type = markers[i].getAttribute("type"); 
       var point = new google.maps.LatLng(
         parseFloat(markers[i].getAttribute("lat")), 
         parseFloat(markers[i].getAttribute("lng"))); 

       var rank = markers[i].getAttribute("rank"); 
       var mileage = markers[i].getAttribute("mileage"); 
       var permalink = markers[i].getAttribute("permalink"); 
       var photolink = markers[i].getAttribute("photolink"); 
       var routelink = markers[i].getAttribute("routelink"); 
       var image_thumb = markers[i].getAttribute("thumbnail"); 


       if(rank > 0 && rank < 10) { 
        iconImageOverUrl = 'http://www.eyehike.com/modules/hikelocator/icons/' + type + rank + '.png'; 
        iconImageOutUrl = 'http://www.eyehike.com/modules/hikelocator/icons/' + type + rank + '.png';   
        m_icon = 'http://www.eyehike.com/modules/hikelocator/icons/' + type + rank + '.png'; 
        m_shadow = 'http://www.google.com/mapfiles/shadow50.png'; 
       } 
       else { 
        iconImageOverUrl = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png'; 
        iconImageOutUrl = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png';  
        m_icon = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png'; 
        m_shadow = 'http://www.google.com/mapfiles/shadow50.png'; 
       }; 

       var marker = new google.maps.Marker({ 
       map: map, 
       position: point, 
       icon: m_icon, 
       shadow: m_shadow, 
       title: name, 
       zIndex: mrk_id, 
       optimized: false, 
       html: "<div style='font-size:12px';width: 400px; height: 200px'><b>" + name 
        + "</b></br><a href=\"" + photolink + "\" TARGET=blank><img src=\"" + image_thumb + "\" height=108 width=144 vspace=2 border=4 align=left></a>" 
        + address 
        + '</br>Difficulty (1-5) : ' 
        + rank 
        + '. Mileage: ' 
        + mileage 
        + " miles.</br>Trail review at: " 
        + "<a href=\"" + permalink + "\" TARGET=blank>www.eyehike.com</a> <br/>" 
        + "<a href=\"" + photolink + "\" TARGET=blank>See pictures of the hike.</a><br/>" 
        + "<a href=\"" + routelink + "\" TARGET=blank>Topograhic map.</a>" 
        + "</div>" 


       }); 
       bindInfoWindow(marker, map, infoWindow); 

      } 


     }); 

    } 

    function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, "click", function() { 
      infoWindow.setContent(this.html); 
      infoWindow.open(map, this); 

//  google.maps.event.addDomListener(window, 'load', load);   

     }); 
     trafficLayer = new google.maps.TrafficLayer(); 
     google.maps.event.addDomListener(document.getElementById('trafficToggle'), 'click', toggleTraffic); 

    } 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 
     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
       request.onreadystatechange = doNothing; 
       callback(request, request.status); 
      } 
     }; 
     request.open('GET', url, true); 
     request.send(null); 
    } 

    function doNothing() {} 

    </script> 
    </head> 
    <body onload="load()"> 
     <button id="trafficToggle">Toggle Traffic Layer</button> 
     <div id="map" style="width: 900px; height: 600px"> 
     </div> 
    </body> 
</html> 

Answer 1

Es gibt zwei mögliche Probleme mit Ihrem Code:

1. Die map Variable ist lokal für die load Funktion.
2. Der Code, der die Trafficlayer konfiguriert ist innerhalb der bindInfoWindow Funktion

Code-Schnipsel:

var map; 
 
var trafficLayer; 
 

 
function toggleTraffic() { 
 
    if (trafficLayer.getMap() == null) { 
 
    //traffic layer is disabled.. enable it 
 
    trafficLayer.setMap(map); 
 
    } else { 
 
    //traffic layer is enabled.. disable it 
 
    trafficLayer.setMap(null); 
 
    } 
 
} 
 

 
function load() { 
 
    // initialize the global map variable 
 
    map = new google.maps.Map(document.getElementById("map"), { 
 
    center: new google.maps.LatLng(44.50, -115.00), 
 
    zoom: 6, 
 
    mapTypeId: 'hybrid' 
 
    }); // The higher the zoom number, the more detailed the map. 
 

 
    trafficLayer = new google.maps.TrafficLayer(); 
 
    google.maps.event.addDomListener(document.getElementById('trafficToggle'), 'click', toggleTraffic); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", load);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<button id="trafficToggle">Toggle Traffic Layer</button> 
 
<div id="map"></div>

Answer 2

Here is my finished html code with the traffic layer working: 
<!DOCTYPE html> 
<html> 
    <head> 
<!-- This tutorial came from: 
    https://developers.google.com/maps/articles/phpsqlajax_v3 
Copyright 2016 Steven Jones 
Licensed under the Apache License, Version 2.0 (the "License"); 
you may not use this file except in compliance with the License. 
You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 
Unless required by applicable law or agreed to in writing, software 
distributed under the License is distributed on an "AS IS" BASIS, 
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
See the License for the specific language governing permissions and 
limitations under the License. 

Google Maps API key manager site: https://console.developers.google.com/apis/credentials?project=divine-course-137822 
Key name as of 8/6/2016 - browser_key_hikelocator: AIzaSyCLxFu4qJHu_ytCjXeWVMUd67hyOS_kT6I 
    --> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Eyehike Hike Locator</title> 
<!-- This line of code will allow you to develop a map without an api key --> 

<script src="https://maps.googleapis.com/maps/api/js?libraries=weather&sensor=false"></script> 


<!-- This code is for the api key --> 
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=your_key_here&callback=load" 
     async defer></script> --> 
<!-- End of code for api  -->    

    <script type="text/javascript"> 
    // this variable will collect the html which will eventually be placed in the side_bar 
    var side_bar_html = ""; 
    var side_bar = ""; 
    var marker = ""; 
    var sb_markers = []; 
    var mcolor = ""; 
    var rank = ""; 
    var mileage = ""; 
    var m_icon; 
    var m_shadow; 
    var mrk_id; 
    var thumnbnail; 
    var map; 
    var trafficLayer; 
    function toggleTraffic(){ 
     if(trafficLayer.getMap() == null){ 
      //traffic layer is disabled.. enable it 
      trafficLayer.setMap(map); 
     } 
     else { 
      //traffic layer is enabled.. disable it 
      trafficLayer.setMap(null);    
     } 
    } 


    function load() { 
     //Initialize the global map variable 
     map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(44.50, -117.00), 
      zoom: 6, // The higher the zoom number, the more detailed the map. 
      mapTypeId: 'hybrid', 
      zoomControl: true, 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.LARGE 
      } 
     }); 


     trafficLayer = new google.maps.TrafficLayer(); 
     google.maps.event.addDomListener(document.getElementById('trafficToggle'), 'click', toggleTraffic); 


     var infoWindow = new google.maps.InfoWindow; 

     // Change this depending on the name of your PHP file 
     downloadUrl("marker_sqli_data.php", function(data) { 

      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
       var name = markers[i].getAttribute("mrk_id"); 
       var name = markers[i].getAttribute("name"); 
       var mcolor = markers[i].getAttribute("mcolor"); 
       var point = new google.maps.LatLng(
         parseFloat(markers[i].getAttribute("lat")), 
         parseFloat(markers[i].getAttribute("lng"))); 

       var rank = markers[i].getAttribute("rank"); 
       var mileage = markers[i].getAttribute("mileage"); 
       var permalink = markers[i].getAttribute("permalink"); 
       var photolink = markers[i].getAttribute("photolink"); 
       var routelink = markers[i].getAttribute("routelink"); 
       var image_thumb = markers[i].getAttribute("thumbnail"); 


       if(rank > 0 && rank < 10) { 
        iconImageOverUrl = 'http://www.eyehike.com/modules/hikelocator/icons/' + mcolor + rank + '.png'; 
        iconImageOutUrl = 'http://www.eyehike.com/modules/hikelocator/icons/' + mcolor + rank + '.png';  
        m_icon = 'http://www.eyehike.com/modules/hikelocator/icons/' + mcolor + rank + '.png'; 
        m_shadow = 'http://www.google.com/mapfiles/shadow50.png'; 
       } 
       else { 
        iconImageOverUrl = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png'; 
        iconImageOutUrl = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png';  
        m_icon = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png'; 
        m_shadow = 'http://www.google.com/mapfiles/shadow50.png'; 
       }; 


       var marker = new google.maps.Marker({ 
        map: map, 
        position: point, 
        icon: m_icon, 
        shadow: m_shadow, 
        title: name, 
        zIndex: mrk_id, 
        optimized: false, 

        html: "<div style='font-size:14px; line-height: 18px; width: 375px; height: 130px'><b>" + name 
         + "</b></br><a href=\"" + photolink + "\" TARGET=blank><img src=\"" + image_thumb + "\" height=108 width=144 vspace=2 border=4 align=left></a>" 
         + '</br>Difficulty (1-5) : ' 
         + rank 
         + '. Mileage: ' 
         + mileage 
         + " miles.</br>Trail review at: " 
         + "<a href=\"" + permalink + "\" TARGET=blank>www.eyehike.com</a> <br/>" 
         + "<a href=\"" + photolink + "\" TARGET=blank>See pictures of the hike.</a><br/>" 
         + "<a href=\"" + routelink + "\" TARGET=blank>Topograhic map.</a>" 
         + "</div>" 

       }); 


       // add a line to the side_bar html 
       side_bar_html += '<a href="javascript:myclick(' + (sb_markers.length) + ')">' + rank + " " + name + '<\/a><br>'; 

       //save the info to use later for the side_bar 
       sb_markers.push(marker); 

//    var side_bar = createSidebarEntry(rank, name); 
//     sidebar.appendChild(sidebarEntry); 

       bindInfoWindow(marker, map, infoWindow); 

       //When I put this in the marker click handler then the side_bar 
       //info appears when the first time I click on a marker. 
       // put the assembled side_bar_html contents into the side_bar div 
       document.getElementById("side_bar").innerHTML = side_bar_html; 

      } 
     } 
     ); 
    } 

    function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, "click", function() { 
      infoWindow.setContent(this.html); 
      infoWindow.open(map, this); 
     }); 
    } 

    // This function picks up the click and opens the corresponding info window 
    function myclick(i) { 
     google.maps.event.trigger(sb_markers[i], "click"); 
    } 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 
     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
       request.onreadystatechange = doNothing; 
       callback(request, request.status); 
      } 
     }; 
     request.open('GET', url, true); 
     request.send(null); 
    } 

    function doNothing() {} 

    </script> 
<style type="text/css"> 

body { 
    font: 1em/150% Arial, Helvetica, sans-serif; 
} 
a { 
    color: #669; 
    text-decoration: none; 
} 
a:hover { 
    text-decoration: underline; 
} 
h1 { 
    font: bold 36px/100% Arial, Helvetica, sans-serif; 
} 

/************************************************************************************ 
STRUCTURE 
*************************************************************************************/ 
#pagewrap { 
    padding: 0px; 
    border:1px solid black; 
    overflow:auto; 
} 

#button { 
    height: 21px; 
    width: 956px; 
    float: right; 
    vertical-align:top; 
    margin-bottom: -9px; //Note added line here 

} 

#side_bar { 
    width: 250px; 
    height: 500px; 
    overflow:auto; 
    text-decoration: underline; 
    color:#393; 
    fontSize: 10px; 
    line-height: 18px; 
    float: left; 
    vertical-align:top; 
} 

#map { 
    width: 956px; 
    height: 650px; 
    float: right; 
} 

#legend { 
    padding-top: 4px; 
    width: 250px; 
    float: left; 
    vertical-align:bottom; 
    overflow:hidden; 
    z-index:99; 
    text-align: center; 
    background-color:#ebe3de; 
    border:#393 1px solid" 
} 

#legendicon { 
    /* padding top, right, bottom, left */ 
    padding: 0px 0px 0px 10px; 
} 

/*This will detect firefox*/ 
@-moz-document url-prefix() { 
    #button { 
     height: 21px; 
     width: 1075px; 
     float: right; 
     vertical-align:top; 
     margin-bottom: -9px; //Note added line here 
    } 
    #map { 
     width: 1075px; 
     height: 650px; 
     float: right; 
    } 
} 
/************************************************************************************ 
MEDIA QUERIES 
*************************************************************************************/ 
/* for 980px or less */ 
@media screen and (max-width: 980px) { 

    #pagewrap { 
     width: 95%; 
    } 
    #button { 
     width: 74%; 
    } 
    #side_bar { 
     width: 25%; 
    } 
    #map { 
     width: 74%; 
    } 
    #legend { 
     width: 25%; 
    } 

} 

/* for iphone 5 samsung s4 375px or less */ 
@media screen and (max-width: 375px) { 

    #side_bar { 
     width: auto; 
     float: none; 
    } 
    #button { 
     width: auto; 
     float: none; 
     vertical-align: top; 
    } 

    #map { 
     width: auto; 
     float: none; 
    } 
} 

/* for 280px or less */ 
@media screen and (max-width: 280px) { 

    #button { 
     height: auto; 
    } 
    h1 { 
     font-size: 24px; 
    } 
    #side_bar { 
     display: none; 
    } 
} 

/* border & guideline (you can ignore these) */ 
/* #side_bar { */ 
/* background: #f0efef; */ 
/*} */ 
/*#map { */ 
/* background: #f8f8f8; */ 
/* width: 600px; height: 600px; overflow:hidden" */ 
/*} */ 

#button, #map, #sidebar { 
    margin-bottom: 0px; 
} 
#pagewrap, #button, #map, #side_bar, #legend { 
    border: solid 1px #ccc; 
} 

</style> 
</head> 
    <body onload="load()"> 
<h3><a href="../../2016/">Return to Eyehike</a></h3> 
<div id="pagewrap"> 

    <div id="button"><button id="trafficToggle">Toggle Traffic Layer</button></div> 

    <div id="side_bar"> 
     <h4>Loading...</h4> 
    </div> 

    <div id="map"> 
    </div> 

    <div id='legend'> 
     <h4 style="color:#393; line-height: 10px; margin: 0; padding: 1">Map Legend</h4> 
      <div id="legendicon"> 
       <img src="http://www.eyehike.com/modules/hikelocator/icons/green_.png" WIDTH=15 HEIGHT=25 ALIGN=left>- Loop Hike<p class="big"> 
       <img src="http://www.eyehike.com/modules/hikelocator/icons/blue_.png" WIDTH=15 HEIGHT=25 ALIGN=left>- Out and Back Hike<p class="big"> 
       <img src="http://www.eyehike.com/modules/hikelocator/icons/orange_.png" WIDTH=15 HEIGHT=25 ALIGN=left>- Backpack 
       </p> 
      </div> 
     <sup> 
     Difficulty Level: 1 thru 5 
     </sup> 
    </div> 

</div> 

</body> 
</html>