Google Maps API-地图未显示-没有错误

Question

我正在尝试将Google API中的地图加载到div中。 但是，该地图未加载，并且没有错误输出。 这是代码：

// google maps

var geocoder, map;
function codeAddress(address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var myOptions = {
        zoom: 8,
        center: results[0].geometry.location,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      }
    });
  }


  google.maps.event.addDomListener(window, 'load', function() {
    codeAddress('" . $location['address'] . " " . $location['zip'] . " " . $location['city'] . " " . $countries[$location['country']] . "');
  });

我解决这个问题已经很长时间了，我没有想法。

大家熟悉Google Maps API的人谁知道我的代码有什么问题？ 我的div确实存在ID：map_canvas。

Answer 1

问题是：

• 我没有使用API​​密钥（即使它不认为这是必要的，但它确实有效）

• 我没有设置div的宽度/高度（ .map_canvas {width: 500px; height: 500px;} ）。

• 我忘了这样激发人心：

   initialize(); function initialize() { google.maps.event.addDomListener(window, 'load', function() { codeAddress('London'); }); } 

现在可以使用了。 谢谢！

Answer 2

您是否正在加载Google Maps API ...？ 您是否在页面上缺少这样的东西？

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your_api_key&sensor=false&callback=initialize"></script>
...
<script>
    function initialize() {
        codeAddress('" . $location['address'] . " " . $location['zip'] . " " . $location['city'] . " " . $countries[$location['country']] . "');
    });
</script>

请看一下Google的示例 。

Answer 3

我假设您将地图加载到“ map_canvas” div上，对吗？ 尝试在样式表上定义这些div的高度和宽度，这就是我在项目中发生的事情，这对我来说已经解决了。问题似乎是由于其他样式属性（例如，位置或浮动）而发生的。