ReferenceError：google没有定义

Question

我想将Google地图嵌入到我的项目中，但遇到了这个问题，我正在寻找许多解决方案，但没有解决我的问题。我真的不明白为什么会出现这个错误！ 这是我的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

据我所知，您正在使用的角度和普通的谷歌SDK，它是疼痛（你必须使用$适用于任何地方，你必须自己破坏事件等），你一定要结账angular-google-maps模块，它有很大的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>