Javascript 谷歌地图不使用角度路由

我正在使用ng view加载地图页面。我可以在一瞬间看到表单输入显示在地图页面上，然后它们就消失了

地图页.html

<input id="pac-input" class="controls" type="text"
    placeholder="Enter a location">
<div id="type-selector" class="controls">
  <input type="radio" name="type" id="changetype-geocode">
  <label for="changetype-geocode">Geocodes</label>
</div>

<div id="map" ng-init="initializeMap()"></div>

<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Google Libraries -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&libraries=places"></script>

<!-- Bootstrap Core JavaScript -->
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>

<script src="js/app.js"></script>

平面控制器

$scope.initializeMap = function() {
var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -33.8688, lng: 151.2195},
  zoom: 13
});

  }

我做错了什么。从阅读谷歌文档到在STOverflow上阅读其他答案，我几乎什么都试过了。目前，我只是求助于从服务器渲染地图页面，效果很好

---

但我理想情况下希望使用角度路由加载此地图。

解决了这个问题。要使用Google Maps Api实现角度布线

在启动映射脚本之前，必须加载DOM元素。在DOM元素和映射脚本之前，必须加载GoogleAPI库。那么

在angular routing之前在head中加载GoogleAPI，或者在body标记中使用回调，如

在执行回调之前，应该加载id=Map的DOM元素

因此，在执行任何操作之前，先加载DOM并使用ng init执行映射初始化脚本

这解决了我的问题

---

另一方面，关于谷歌地图，地图容器的所有父元素都应该在CSS中有一个height属性，否则地图不会显示

你有javascript错误吗？google地图的一个常见问题是，在加载google.maps对象之前，可以调用“initializeMap（）”。尽管您之前包含了该文件，但api仍在进行异步加载。这就是为什么他们添加了一个额外的参数“&callback=function\u name”以添加到googleapis.com url中，其中function\u name位于窗口级别（window['function\u name']），并在google加载所有必要的资源后立即调用。根本没有控制台错误。那么，我该如何修复它呢？我已经尝试在身体层面而不是像这样在头部层面包含google places库链接，但仍然不起作用。

$scope.initializeMap = function() {
var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -33.8688, lng: 151.2195},
  zoom: 13
});

  }