谷歌地图不使用Angularjs显示答案

【问题标题】：Google Map not show by using Angualrjs谷歌地图不使用Angularjs显示
【发布时间】：2016-08-02 16:18:33
【问题描述】：

我正在尝试使用 AngularJS 制作一个简单的 Google Map 应用程序。我没有使用“ngMaps”或“Angular-ui”之类的 Google API。我拥有非常基本的结构，我可以在控制台中显示我的谷歌地图对象，问题是页面上什么都没有显示

home.html:

<div id="map"></div>

app.js：

var app = angular.module('locator',['ngRoute', 'ngMaps']); 

app.config(['$routeProvider', '$locationProvider', '$httpProvider',
function ($routeProvider, $locationProvider, $httpProvider){
    'use strict';

    $routeProvider
        .when('/', {
            templateUrl: './partials/home.html',
            controller: 'masterCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

masterCtrl：

app
 .controller('masterCtrl', ['$scope', '$window', masterCtrl]);

function masterCtrl($scope, $window) {
 function initialize() {
  var lat = 46.87916;
  var lng = -3.32910;
  var map_id = '#map';

  var myOptions = {
   zoom : 8,
   center : new google.maps.LatLng(lat, lng),
   mapTypeId : google.maps.MapTypeId.ROADMAP
  };
  $scope.map = new google.maps.Map($(map_id)[0], myOptions);
 }
  initialize();

}

【问题讨论】：

你是否包含了 google map api？
是的，我确实包含在我的 index.html 中

标签： javascript angularjs google-maps

【解决方案1】：

问题解决了，我需要做的就是添加一个“ng-init”来回调我的initialize()函数，它会初始化页面上的地图。

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

【讨论】：