2017-04-27 23 views
-1

i JavascriptとAPIキーに問題があります。私は、このコードがブラウザにマップを表示したいだけですが、それでもAPIキーを見つけることはできません。Google Maps API V3 APIキーがロードされない

私は数回前にGoogleマップを使用しましたが、これらの問題はありません。

私があなたを助けてくれることを願っています!

は、ここに私のコード

<!DOCTYPE html> 
<html> 
<head > 

    <title>maps</title> 
    <style type="text/css"> 
     body { 
      height: 100%; 
      margin: 0; 
      padding: 0 
     } 
    </style> 
</head> 
<body> 



<!-- Load the Google API: --> 

<script src="http://maps.googleapis.com/maps/api/js"></script> 

<script> 
var map = {};  
var mapCenter = new google.maps.LatLng(51.0, 1.5); 
var trackList = []; 
var trackSymbolSize = 1.0; 

var MAX_NUMBER_OF_TRACKS = 100000; 
var EXCEPTION_AT_LOGICAL_ERROR = true; 
var CONSOLE_LOG = true; 

function initMap() { 
    var mapProp = { 
     center: mapCenter, 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 


    document.getElementById("googleMap").style.height = innerHeight + 'px'; 
    document.getElementById("googleMap").style.width = innerWidth + 'px'; 

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
} 

function browserResize() { 
    document.getElementById("googleMap").style.height = innerHeight + 'px'; 
    document.getElementById("googleMap").style.width = innerWidth + 'px'; 

    google.maps.event.trigger(map, 'resize'); 
} 

</script> 

<script> 

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

</script> 

<div id="googleMap"></div> 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuZVG0Z9Ei7ubm5bkAfPsYUI-Wm8C_c-0&callback=initMap" async defer></script> 

</body> 

</html> 
+2

それはすでにそれが思わ –

+1

キーを使用して、以下に含まとして '<スクリプトSRC = "http://maps.googleapis.com/maps/api/js">を'上部の削除私はマップapi javascriptを2回含んでいます、1つはキーなしで(トップに)、おそらく2回目はもう一度読み込みませんか? – masadwin

+0

@ Deep3015は何を言っているのですか? – masadwin

答えて

1

このようにしてみています。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <title>maps</title> 
 
    <style type="text/css"> 
 
    body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0 
 
    } 
 
    </style> 
 
    <!-- Load the Google API: --> 
 

 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuZVG0Z9Ei7ubm5bkAfPsYUI-Wm8C_c-0&callback=initMap" async defer></script> 
 
</head> 
 

 
<body> 
 
    <div id="googleMap"></div> 
 
    <script> 
 
    var map = {}; 
 
    var mapCenter 
 
    var trackList = []; 
 
    var trackSymbolSize = 1.0; 
 

 
    var MAX_NUMBER_OF_TRACKS = 100000; 
 
    var EXCEPTION_AT_LOGICAL_ERROR = true; 
 
    var CONSOLE_LOG = true; 
 

 
    function initMap() { 
 
     mapCenter = new google.maps.LatLng(51.0, 1.5); 
 
     var mapProp = { 
 
     center: mapCenter, 
 
     zoom: 8, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 

 

 
     document.getElementById("googleMap").style.height = innerHeight + 'px'; 
 
     document.getElementById("googleMap").style.width = innerWidth + 'px'; 
 

 
     map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    } 
 

 
    function browserResize() { 
 
     document.getElementById("googleMap").style.height = innerHeight + 'px'; 
 
     document.getElementById("googleMap").style.width = innerWidth + 'px'; 
 

 
     google.maps.event.trigger(map, 'resize'); 
 
    } 
 
    </script> 
 

 

 
</body> 
 

 
</html>

+0

はい、これは動作します:) Thnak You very much! – Hans

関連する問題