Google Map API 似乎无法加载答案

【问题标题】：Google Map API seems to not loadGoogle Map API 似乎无法加载
【发布时间】：2015-06-04 13:01:14
【问题描述】：

我的网站上的谷歌地图无法加载，但容器中仍有一些东西，除了白色背景，确实我可以看到右下角的条款和右上角的卫星按钮。

这里有代码，希望你能找出问题所在：

function initialize() {
        var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
        var mapOptions = {
          center: myLatLng,
          zoom: 17,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(mapCanvas, mapOptions);

        var image = {
            url: '/media/A.png',
            size: new google.maps.Size(56, 67),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(32, 67),
            scaledSize: new google.maps.Size(56, 67)
        };

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize());

【问题讨论】：

google.maps.event.addDomListener(window, 'load', initialize);（初始化后去掉括号）。如果它不能解决问题，我们需要查看更多代码。
Your code as posted works for me when I assign a value to mapcanvas. 你如何定义它？您的 HTML/CSS 是什么样的（与地图相关的内容）。

标签： javascript html css google-maps google-maps-api-3

【解决方案1】：

在您的代码中 mapCanvas 似乎未分配。添加 var mapCanvas = document.getElementById('map'); 之类的内容后，地图会按预期加载。 JSFiddle

【讨论】：

【解决方案2】：

搞定了。

我已添加 googleapis 链接“https://maps.googleapis.com/maps/api/js?sensor=false">。

我已将var map = new google.maps.Map(mapCanvas, mapOptions); 更改为var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

我已经删除了地图事件监听器中的空括号。

<!DOCTYPE html>
<html>
<head>
   <style>
       #map-canvas {
           width: 600px;
           height: 600px;
       }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
        function initialize() {
    var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
    var mapOptions = {
      center: myLatLng,
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    var image = {
        url: '/media/A.png',
        size: new google.maps.Size(56, 67),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(32, 67),
        scaledSize: new google.maps.Size(56, 67)
    };

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>

【讨论】：