Google maps api V3は何も表示しません、空白のページ

-1

私は複数のルートを私に示す地図を作ろうとしていますが、私にとっては地図が表示されていなくても空白のページが表示されます。私のコードの問題は何ですか、私はそれを見つけることができません。それはちょうど空白のページです。ここでGoogle maps api V3は何も表示しません、空白のページ

は私のコードです：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title></title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     float: left; 
     width: 63%; 
     height: 100%; 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 

    var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: {lat: -24.345, lng: 134.46} 
     }); 

     function renderDirections(result) { 
      var directionsRenderer = new google.maps.DirectionsRenderer({ 
      draggable: true, 
      map: map, 
     }); 

      directionsRenderer.setMap(map); 
      directionsRenderer.setDirections(result); 
     } 


     var directionsService = new google.maps.DirectionsService; 

     function requestDirections(start, end) { 
      directionsService.route({ 
      origin: start, 
      destination: end, 
      travelMode: 'DRIVING' 
      }, function(result) { 
      renderDirections(result); 
      }); 
     } 

     requestDirections('Huntsville, AL', 'Boston, MA'); 
     requestDirections('Bakersfield, CA', 'Vancouver, BC'); 

</script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6POCSerSPAK1t9zhKiFbiTDzh5TDPeYg&callback=initMap"> 
    </script> 
    </body> 
</html>

出典

2017-03-05 Lukas Petkevičius

あなたはあなたのコードでは、コールバック関数書くのを忘れて：あなたは、SRCでそれを呼び出しているが、あなたはそれを実装したことがないので

function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: {lat: -24.345, lng: 134.46} 
    }); 

    function renderDirections(result) { 
     var directionsRenderer = new google.maps.DirectionsRenderer({ 
     draggable: true, 
     map: map, 
    }); 

     directionsRenderer.setMap(map); 
     directionsRenderer.setDirections(result); 
    } 


    var directionsService = new google.maps.DirectionsService; 

    function requestDirections(start, end) { 
     directionsService.route({ 
     origin: start, 
     destination: end, 
     travelMode: 'DRIVING' 
     }, function(result) { 
     renderDirections(result); 
     }); 
    } 

    requestDirections('Huntsville, AL', 'Boston, MA'); 
    requestDirections('Bakersfield, CA', 'Vancouver, BC'); 
}

を：

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6POCSerSPAK1t9zhKiFbiTDzh5TDPeYg&callback=initMap"

出典

2017-03-05 13:10:09 Aznhar

Google maps api V3は何も表示しません、空白のページ

答えて

関連する問題