谷歌地图没有加载数据答案

【问题标题】：Google Maps is not loading data谷歌地图没有加载数据
【发布时间】：2016-09-15 13:44:57
【问题描述】：

我正在处理一些必须使用 Angular 的项目。这是我第一次接触这个框架，所以我可能会犯一些错误。

我创建了由 Google Maps API 回调调用的函数 initMap()（当我调用 Google API 的文件时，<script src="..">.. 中的参数 &callback=initMap）。

我的函数 initMap() 等待 bag 变量值 - 它是包含我想用作标记的城市的全局变量。我知道这是非常糟糕的做法，但我花了很多时间从 Angular 范围获取数据——但我是菜鸟，我做不到。让我们继续 - 当我收到数据时，我正在通过

创建新对象

var map = new google.maps.Map(document.getElementById('map'), mapOptions)

之后我在等待idle 事件，然后在我的地图上放置标记。

google.maps.event.addListenerOnce(map, 'idle', function() {
    // Put markers
});

这是一个魔法 - 有时地图没有加载。我收到灰色框、左下角的 Google 徽标，仅此而已。当我将 console.log(..) 放入此侦听器时，我会在控制台中收到我的日志消息。

当我进行硬刷新（例如Ctrl + F5）时，一切正常（总是）。

我的第一个想法是从 script 标记中删除 defer（因为在 FireBug Network 中我可以看到很长的加载分析脚本）-但这对我没有帮助。

真的请 - 不要使用诸如“noob，不要使用全局变量”之类的 cmets 发送垃圾邮件。如果它不能帮助我 - 请不要搞砸。

问候

【问题讨论】：

如果你能用我的回答解决你的问题，请告诉我。

标签： javascript angularjs google-maps google-maps-api-3

【解决方案1】：

如果您使用的是 AngularJS，您可以通过 ng-init="MapController.initMap()"init 您的地图槽。

无论如何，您需要共享更多代码，因为从这里无法理解问题所在。

您应该启动一个 AngularJS Google 地图应用，例如：

HTML：

<html ng-app="mapApp">
 . . .
  <body ng-controller="MapController" ng-init="MapController.initMap()">
    <div id="map"></div>
  </body>
</html>

JS：

angular.module('mapApp', []);

angular
  .module('mapApp')
  .controller('MapController', MapController);

  function MapController(){

  var vm = this;

     vm.initMap = function() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            center: new google.maps.LatLng(32.483, 16.084)
        });
     }
   }

CSS：

#map{
      height: 400px;
      width:  700px;
 }

Here You can find a Plunker I made with the code Above。它真的永远不会冻结或导致像你这样的问题。
现在，您还可以使用directive 对其进行初始化。看看this answer of mine about initializing it with a directive 和Its Plunker。
最后，Here you can Find another Plunker I made to add n markers to your map and make them clickable (showing information)。

希望我对您有所帮助。

【讨论】：