谷歌地图有时不工作......或几乎总是不工作

Question

好吧，根本无法理解为什么它不起作用谷歌地图。 我阅读了几乎所有的文档，不仅仅是因为我遇到的问题，还因为我需要使用多边形等等。

所以，这是我的代码（ 我发表了一些评论，以便他们能够更快地理解 ）：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div style="width:100%;height:400px;padding:0;margin:0;">
    <div id="canvas" style="width:100%; height:100%;padding:0;margin:0;"></div>
</div>

<script>
    function initialize() {
        var colors = ['#00bfff','#7eabe9','#799fe7','#7293e5','#6989e4','#5e7ee3','#5273e2','#4169e1','#4b6fde','#5274db','#5979d8','#5f7fd5','#6584d2','#698acf','#1e90ff'];
        var location = [
            {"name":"lisboa","lat":38.725717,"lng":-9.150248},
            {"name":"madrid","lat":40.420275,"lng":-3.705766},
            {"name":"burdeos","lat":44.836625,"lng":-0.581048},
            {"name":"loira","lat":46.621773,"lng":2.452032},
            {"name":"paris","lat":48.856929,"lng":2.341198},
            {"name":"bruselas","lat":50.848375,"lng":4.349679},
            {"name":"rotterdam","lat":51.922848,"lng":4.478452},
            {"name":"amsterdam","lat":52.373085,"lng":4.893276}
        ];
        var map = new google.maps.Map(document.getElementById('canvas'), {
            'center'    :   new google.maps.LatLng(0,-180),
            'zoom'      :   3,
            'mapTypeId' :   google.maps.MapTypeId.TERRAIN
        });

        // store positions on var flightPlanCoordinates
        var flightPlanCoordinates = [];

        // set markers and popovers/infWindow
        // *remember var flightPlanCoordinates*
        for (var i = 0; i < location.length; i++) {
            var lat     =   location[i].lat,
                lng     =   location[i].lng,
                name    =   location[i].name;
            var pos     =   new google.maps.LatLng(lat, lng);
            var infowindow =  new google.maps.InfoWindow({
                'content'   :   name,
                'map'       :   map,
                'position'  :   pos
            });
            infowindow.close();
            flightPlanCoordinates.push(pos);
            var marker = new google.maps.Marker({
                'position'  :   pos,
                'map'       :   map,
                'title'     :   name,
                'icon'      :   {
                    'path'      :   google.maps.SymbolPath.CIRCLE,
                    'scale'     :   5,
                    'strokeColor':  colors[i]
                }
            });
            google.maps.event.addListener(marker, 'click', function() {
                if (infowindow) {
                    infowindow.close();
                }
                infowindow.open(map, this);
            });
        }
        // set polylines
        // *remember var flightPlanCoordinates*
        for (var i = 0; i < flightPlanCoordinates.length; i++) {
            if(typeof flightPlanCoordinates[i+1] == 'undefined'){
                continue;
            }
            var PathStyle = new google.maps.Polyline({
                'path'          : [
                    flightPlanCoordinates[i],
                    flightPlanCoordinates[i+1]
                ],
                'strokeColor'   : colors[i],
                'strokeOpacity' : 1.0,
                'strokeWeight'  : 2,
                'map'           : map
            });
        }
    }
    // Draw Google Maps V3
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

页面/站点具有UTF-8，没有BOM Charset，通过文档和服务器（apache强制UTF-8，HTML写入UTF-8，无BOM）。

那么，现在看看我看到的（ 每个图像都是刷新页面的快照 ）：

有时工作正常，有时......

Anothertimes，工作，工作不好，非常糟糕......

Anothertimes，工作，工作不好，非常糟糕和显示零件削减零件......

我还在以下浏览器中对此进行了测试：

• iPad Air 2，iOS 8.1 - 谷歌浏览器44.0.2403.67

• iPad Air 2，iOS 8.1 - Safari

• MacBook Air，优胜美地 - Google Chrome

• MacBook Air，优胜美地 - Safari

• MacBook Air，优胜美地 - 火狐

• Windows 8 - 禁用Adblock的Google Chrome

• Windows 8 - Firefox
• Windows 8 - Safari

• Windows 8 - Internet Explorer 8,9,10

• Android 4.4.4，小米MI4 - 谷歌Chrome Android

• Android 4.4.4，小米MI4 - Firefox Android

• Window Phone 8.10 - Internet Explorer

• Firefox OS 1.1.0.0 - Internet Explorer

这里的代码片段 - http://jsbin.com/fozocimuke/edit?html,js,output - http://codepen.io/anon/pen/eNoGVN

拜托，帮帮我......我不明白这里发生了什么......谢谢。

Answer 1

以下答案是根据OlafErlandsen的问题编辑的，以保持SO的问答形式。 如果以下是有用的，请提出他的问题

---

好吧，我的canvas元素（div＃canvas）在起始页面上有0px高度（onload事件），因此，解决方案很简单：需要响应式地图因为默认情况下谷歌地图没有响应。

在这种情况下，Google Maps Api具有多个处理程序和方法，例如：

google.maps.event.trigger（）

google.maps.event.addDomListener（）

因此，如果您需要“启用”响应式地图，则需要以下代码：

// you need the "map" var and this has to be a "map" (new google.maps.Map(...))
var map = ...;
// And you need
google.maps.event.addDomListener(window, 'resize', function() {
    var center = map.getCenter();
    map.setCenter(center);
});
// And aditionally you can need use "trigger" for real responsive
google.maps.event.trigger(map, "resize");

而且，如果你使用像Bootstrap，jQuery，jQuery UI和其他libs这样的手风琴，而谷歌地图会出现类似问题，你可以使用trigger 。 “记住并思考jQuery的”幻灯片“效果。”

jQuery UI上的示例：

$("#accordion").bind('accordionchange', function(event, ui) {
    // here you trigger
    // And remember "map" var, in this case we assume that it is a global variable.
    google.maps.event.trigger(map, "resize");
});

Answer 2

我得到了解决方案，使用下面的代码来解决问题：

// you need to use "map" var name Example : var map = (new google.maps.Map(...));

setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);