Javascript 谷歌地图教程不起作用_Javascript_Html_Google Maps

Javascript 谷歌地图教程不起作用

javascript html google-maps

Javascript 谷歌地图教程不起作用,javascript,html,google-maps,Javascript,Html,Google Maps,我正在学习教程但由于某些原因，它不起作用。。。也许我错过了什么 HTML: JS: 注意：在我添加的fiddle资源中我只是不知道我做错了什么。。。html、css和java脚本都与教程中的相同。。我甚至添加了$function{以确保在文档之后加载脚本，但没有帮助…代码都很好在小提琴中：在左上方下面是框架和扩展选择： No-Wrap in <head> 从第二个下拉列表中演示：$function{}和google.maps.event.addDomainListen

我正在学习教程

但由于某些原因，它不起作用。。。也许我错过了什么

HTML:

JS:

注意：在我添加的fiddle资源中

我只是不知道我做错了什么。。。html、css和java脚本都与教程中的相同。。我甚至添加了$function{以确保在文档之后加载脚本，但没有帮助…

代码都很好

在小提琴中：在左上方

下面是框架和扩展

选择：

No-Wrap in <head>

从第二个下拉列表中

演示：

$function{}和google.maps.event.addDomainListenerWindow、'load'，…做同样的事情，只需在jquery$函数内调用initialize。将背景颜色添加到css也是一个问题

调整后的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;
}

抱歉，我没听清楚什么是框架和扩展？-加上你的提琴不起作用。谢谢！现在我明白了…@geocodezip先解决了它…但你有我的投票权：实际上你的答案更有意义-并且对如何实际使它工作有正确的解释…$function{}还有google.maps.event.addDomListenerwindow，'load'，…做同样的事情，只需在jquery$函数中调用initialize。将背景颜色添加到css也是一个问题。谢谢@geocodezip为什么不将此作为答案发布，以便其他人可以看到，我可以接受-另外，既然我必须更改脚本，这是否意味着谷歌教程代码错误？我们应该通知他们吗？教程。你的更改是问题所在。

No-Wrap in <head>

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

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