Javascript googleMaps api在单独文件中不工作_Javascript_Html_Google Maps

Javascript googleMaps api在单独文件中不工作

javascript html google-maps

Javascript googleMaps api在单独文件中不工作,javascript,html,google-maps,Javascript,Html,Google Maps,我从w3schools复制了一段关于googlemapsapi的代码 <!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> function initi

我从w3schools复制了一段关于googlemapsapi的代码

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

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

成为

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


google.maps.event.addDomListener（窗口“加载”，初始化）；

但它似乎不起作用

代码中缺少的重要部分。检查HtML正文

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

</body>


这是工作代码
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> 

包含script
标记的顺序很重要js
文件按包含顺序加载
如果您检查控制台，您可以看到每个js
文件都被逐个加载。
尝试用$（document）包装您的js。ready（）您的元素googleMap
在html
中的哪里？您不能将代码放在带有外部源的标记中，您是否检查了浏览器控制台中的任何错误？
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>

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

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();
});