Javascript 在角度视图中显示google地图时出现间歇性问题

我在一个角度视图中嵌入了一个谷歌地图，它显示（如右下图所示）一些时间，然后在我刷新页面时显示为灰色（左下图）

我对谷歌的引用如下所示：

<script src="https://maps.google.com/maps/api/js?key=<api_key>" type="text/javascript"></script>

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

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': addressLine }, function (results, status) {

     if (status == google.maps.GeocoderStatus.OK) {
          var myLatLng = { lat: results[0].geometry.location.lat(), 
                           lng: results[0].geometry.location.lng() };

     var myOptions = { zoom: 8, center: myLatLng };
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

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

有人知道为什么会这样吗？或者你以前有过这样的经历

---

提前谢谢

为您的谷歌地图创建一个指令。该状态的控制器在加载视图之前执行。指令的控制器将在视图之后加载

谷歌地图上可能有很多指令。所以只要找到一些已经存在的东西并调整它

例如：