Javascript googleMaps API不工作时，在单独的文件

问题描述：

我已经从w3schools关于谷歌地图api复制了一段代码。Javascript googleMaps API不工作时，在单独的文件

<!DOCTYPE html> 
<html> 
<head> 
<script 
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
</script> 

<script> 
function initialize() 
{ 
var mapProp = { 
    center:new google.maps.LatLng(51.508742,-0.120850), 
    zoom:5, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
} 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 

</body> 
</html>

当我把它放在我的HTML文件中，它的工作原理。

但是，如果我尝试这段代码放在一个JavaScript文件中

function initialize() 
{ 
var mapProp = { 
    center:new google.maps.LatLng(51.508742,-0.120850), 
    zoom:5, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
} 

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

它不工作

里面我的HTML将

<script 
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
    </script> 
<script src = "~/Scripts/JScript.js"> </Script>

我也试过取出此功能

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

成为

<script 
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
    </script> 
<script src = "~/Scripts/JScript.js"> google.maps.event.addDomListener(window, 'load', initialize);</Script>

，但它只是似乎没有工作

尝试使用$（document）.ready（）打包您的js – Sualkcin

您的元素'googleMap'在'html'中的位置？ –

你不能将代码放在带有外部源的'

答

这里是工作的代码，

HTML

map.html

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
     <script src="map.js"></script> 
     <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 

     </script> 
    </head> 

    <body> 
     <div id="googleMap" style="width:500px;height:380px;"></div> 

    </body> 
</html>

map.js

function initialize() 
{ 
    var mapProp = { 
     center:new google.maps.LatLng(51.508742,-0.120850), 
     zoom:5, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap") 
     ,mapProp); 
} 

$(document).ready(function(){ 
    initialize(); 
});

包括script标记的顺序很重要。 js文件按它们包含的顺序加载

如果您检查您的控制台，您可以看到每个js文件被逐个加载。

答

从你的代码中缺少重要的一块。检查你的HTML正文

<body> 
<div id="googleMap" style="width:500px;height:380px;"></div> 

</body>

Javascript googleMaps API不工作时，在单独的文件

相关推荐