的 FIDDLE

HTML：

<div id="map_canvas"></div>

CSS：

#map_canvas {
    width: 500px;
    height: 400px;
    background-color: #CCC;
}

JS：

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

注意：在小提琴资源中，我添加了 Google-Api

我只是弄清楚我做错了什么... html，css＆amp; java脚本都与教程中的相同..我甚至添加了$(function (){以确保脚本在文档之后加载但没有帮助......

Answer 1

代码很好。

小提琴：在左上方

框架和扩展程序

选择

No-Wrap in <head>

从第二次下拉开始。

enter image description here

DEMO： http://jsfiddle.net/DVT7B/3/

Answer 2

$（function（）{}和google.maps.event.addDomListener（window，'load'，...）执行相同的操作，只需在jquery $函数内调用initialize。将background-color添加到css也是一个问题。

working fiddle

调整javascript：

$(function () {
    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)
    }
    initialize();
});

调整后的css：

#map_canvas {
    width: 500px;
    height: 400px;
}

谷歌地图教程不起作用

的 FIDDLE

2 个答案: