Question

我无法在我的网站上获得基本的Google地图示例。我的页面上有以下div：

<div id="map_canvas" style="width:100%; height:100%"></div>

以下是我文件的负责人：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    jQuery(document).ready(initialize);
</script>

似乎元素已加载到我的DOM中，但页面上没有可见的地图。

Answer 1

根据Google Map not showing up，div上的百分比大小（例如100％）似乎无法正常工作。我必须明确指定div的像素高度和宽度。

Answer 2

如果您想在整个屏幕上显示谷歌地图，请仅使用100％。!!
这是一个使用100％宽度高的样品 http://www.rizeworkshop.com/basic-google-map-v3/

Answer 3

您的网站上是否启用了jQuery？否则，在body标签内创建一个“onload = initialize（）;” - attribut，以便执行javascript。

据我所知，您的初始请求需要API密钥？

Answer 4

代码看起来没问题，它与文档中的示例类似，因此它应该正常工作。

您是否尝试过从初始化功能在屏幕上打印一些信息？检查是否正确创建了latlng，myoptions和map变量。

如果是，则调用初始化函数存在问题...

Answer 5

我测试了你的代码，如果我使用<body onload="initialize()">作为da_didi建议，我可以正常工作。你有jquery.js的导入指令吗？

谷歌地图API基本示例

5 个答案: