Javascript 谷歌地图API-地图不显示_Javascript_Google Maps Api 3

Javascript 谷歌地图API-地图不显示

javascript google-maps-api-3

Javascript 谷歌地图API-地图不显示,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我正在关注谷歌关于如何在html页面中使用简单地图的文章。但是，当我运行代码时，只显示一个灰色的正方形（我创建的div）。有人能帮我吗以下是我正在使用的代码： <!DOCTYPE html> <html> <head> <style> #map_canvas { width: 500px; height: 500px;

我正在关注谷歌关于如何在html页面中使用简单地图的文章。但是，当我运行代码时，只显示一个灰色的正方形（我创建的div）。有人能帮我吗

以下是我正在使用的代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #map_canvas {
                width: 500px;
                height: 500px;
                background-color: #CCC;
            }
        </style>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script>
            function initialize() {
                var ap_canvas = document.getComputedStyle('map_canvas');
                var mapOptions = { new google.maps.Lating(44.5403, -78.5463),
                    zoom:8,
                    mapTypeld: google.maps.MapTypeId.ROADMAP }
                    var map = new google.maps.Map(map_canvas, mapOptions)
                    }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map_canvas">

        </div>

    </body>
</html>


#地图画布{
宽度：500px；
高度：500px；
背景色：#CCC；
}
函数初始化（）{
var ap_canvas=document.getComputedStyle（'map_canvas'）；
var mapOptions={new google.maps.Lating（44.5403，-78.5463），
缩放：8，
mapTypeld:google.maps.MapTypeId.ROADMAP}
var map=new google.maps.map（地图画布，地图选项）
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

您有几个输入错误，例如“var ap_canvas”应该是“var map_canvas”。此功能的工作原理是：

<script>
function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>


函数初始化（）{
var map_canvas=document.getElementById（'map_canvas'）；
变量映射_选项={
中心：新google.maps.LatLng（44.5403，-78.5463），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（地图画布，地图选项）
}
google.maps.event.addDomListener（窗口“加载”，初始化）；