谷歌地图API是如何与AngularJS一起工作的

<style>
  #googleMap {
    width: 200px;
    height: 200px;
  }
</style>
<div id="googleMap"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script language="javascript">
  var map;
  function initialize() {
    var mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644)
    };
    map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

你可以在angularjs中实现谷歌地图，而不需要像这样使用任何插件，

<!--use this div  where ever you want to create a map-->
     <div id="map"></div>

定义地图div的宽度和高度，

#map {
 height:420px;
 width:600px;
}

在控制器中你把id="map"和作用域像这样粘在一起，

$scope.mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(41.923, 12.513),
    mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), $scope.mapOptions);

如果您想为您想要的城市或国家创建标记，

 var cities = "Atlanta, USA";
 var geocoder= new google.maps.Geocoder();
 $scope.markers = [];
 var createMarker = function (info){
    var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.maps.LatLng(info.lat(), info.lng())
    });
 }
geocoder.geocode( { 'address': cities }, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
    newAddress = results[0].geometry.location;
    $scope.map.setCenter(newAddress);
    createMarker(newAddress)
 }
});

最后但并非最不重要的是确保在做所有这些事情之前添加了google maps api脚本，

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

下面是这个代码的工作活塞，在一个bootstrap模型中，

http://embed.plnkr.co/VT7cO0L2ckSWG6g63TVG/preview

参考

希望这对你有帮助!

这是晚了，但我已经做了这个解决方案。这样就没有必要在html的头部添加google map脚本src，或者没有机会出现任何与google map src相关的错误。该脚本将通过loadScript函数自动添加。在angular中，需要在部分中添加新的js src，而不是在主脚本的头部。所以我认为这将是最好的解决方案

我在我的控制器中使用了这个代码块。

    $scope.initialize = function() {
        $scope.mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(22.649907498685803, 88.36255413913727)
        };
        $scope.map = new google.maps.Map(document.getElementById('googleMap'), $scope.mapOptions);
    }
    $scope.loadScript = function() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.google.com/maps/api/js?sensor=false&callback=initialize';
        document.body.appendChild(script);
        setTimeout(function() {
            $scope.initialize();
        }, 500);
    }

setTimeout的存在是因为google map src需要一些时间来下载并准备好。,callback=initialize是必需的，因为这个google地图将准备好回调。主要问题是，代码google.maps.event.addDomListener(window, 'load', initialize)不执行，如果我添加谷歌地图src部分，而不是头部的主要索引。html。但是这个设置是完美的。

这一段放到html

<div class="form-group col-lg-12" id="googleMap">
      <center>Waiting for the map...</center>
</div>

现在将ng-init="loadScript()"放置在任何外部div的任何位置，以便loadScript在初始化之前