2017-04-27 104 views
-1

我的Javascript和API密钥有问题。我只想让这段代码在浏览器中显示地图,但它仍然找不到API KEY。Google Maps API V3 API密钥无法加载

我以前用过几次谷歌地图,但我没有这些问题。

我希望你能帮助我!

这里是我的代码

<!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

下面包括它似乎我说你已经包含了地图API API两次,一个没有键(在顶部),也许第二次它不重新加载它? – 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你非常! – Hans