Google地图API基本示例 [英] Google maps API Basic Example

问题描述

我一直无法获取在我的网站上运行的基本Google地图示例。我的网页上有以下div：

I've been unable to get the basic Google maps example working on my site. I have the following div on my page:

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

以下在我文档的头部：

And the following in the head of my document:

<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中，但是页面上没有可见的地图。

It appears that the elements are getting loaded into my DOM, but there is no visible map on the page.

推荐答案

根据 Google地图未显示，看起来div上的百分比大小（例如100％）无法正常工作。我必须明确指定div的像素高度和宽度。

As per Google Map not showing up, it appears that percentage sizes on the div (e.g. 100%) don't work properly. I had to explicitly specify a pixel height and width for the div.

这篇关于Google地图API基本示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！