ReferenceError: google is not defined

Question

我想将 google 地图嵌入到我的项目中，但遇到了这个问题，我正在寻找许多解决方案，但 none 解决了我的问题。我真的不明白为什么会出现这个错误！ 这是我的 javascript 文件

var mapOptions = {
              zoom: 4,
              center: new google.maps.LatLng(25,80),
              mapTypeId: google.maps.MapTypeId.TERRAIN
          }

          $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

          $scope.markers = [];

          var infoWindow = new google.maps.InfoWindow();

          var createMarker = function (info){

              var marker = new google.maps.Marker({
                  map: $scope.map,
                  position: new google.maps.LatLng(info.lat, info.long),
                  title: info.city
              });
              marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

              google.maps.event.addListener(marker, 'click', function(){
                  infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                  infoWindow.open($scope.map, marker);
              });

              $scope.markers.push(marker);

          }  

          for (i = 0; i < cities.length; i++){
              createMarker(cities[i]);
          }

          $scope.openInfoWindow = function(e, selectedMarker){
              e.preventDefault();
              google.maps.event.trigger(selectedMarker, 'click');
          }

Answer 1

A​​faik，你正在使用 angular 和普通的 google sdk，这很痛苦（你必须在所有地方使用 $apply，你必须自己销毁事件，等等），你一定要检查angular-google-maps module, it has great documentation，下面是简单的演示

angular.module('app', ['uiGmapgoogle-maps']).controller('ctrl', function($scope){
  $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
});

.angular-google-map-container { height: 400px; }

<script src='http://maps.googleapis.com/maps/api/js'></script>
<script src="
http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</div>