Javascript 谷歌地图没有'；使用angularjs在第二个局部视图上不显示

我一直在关注这个问题的答案/例子。

我已经设置了一个plunker示例来说明发生了什么

包括git回购的例子。我的地图在我第一次查看地图页面时加载（部分），但是如果我选择另一个链接，然后返回地图，则地图不会加载。我可以看到映射仍然存在，因为它被称为它只是没有用id=“map”替换div

我不在乎地图会在这个阶段被重新初始化，我已经为不同的地方的地图建立了一个商店，但是没有地图就不行了！我的列表和详细信息页面按预期工作/web/place是对我的silex后端的ajax调用

index.html controllers.js services.js place-map.html

我已经开始使用angularjs UI。它解决了我的问题。

据我所知，这段代码将在每次加载局部视图时重新加载地图。这不是真的！我已经开始使用angularjs UI。它已经解决了我的问题。考虑删除这个问题或添加你的评论作为答案，使这个问题不再出现在“未回答”列表中。

<div class="container full-width" ng-view></div>

'use strict';

/* App Module */
var app = angular.module('places', ['Controllers', 'Filters', 'Services']);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/places', {templateUrl: 'partials/place-list.html',   controller: 'ListController'}).
      when('/places/:placeId/details', {templateUrl: 'partials/place-detail.html', controller: 'DetailController'}).
      when('/places/:placeId/map', {templateUrl: 'partials/place-map.html', controller: 'MapController'}).
      otherwise({redirectTo: '/places'});
}]);

'use strict';

/* Controllers */
var controllers;
controllers = angular.module("Controllers", []);

controllers.controller("ListController", function($scope, Place) {
    $scope.places = Place.query();
});

controllers.controller("DetailController", function($scope, $routeParams, Place) {
    $scope.place = Place.get({placeId: $routeParams.placeId});
});

controllers.controller("MapController", function($scope, $routeParams, Place, GoogleMaps) {
    $scope.place = Place.get({placeId: $routeParams.placeId});
    $scope.map = GoogleMaps;
});

'use strict';

/* Services */
var services;

services = angular.module('Services', ['ngResource']);

services.factory('Place', function($resource){
    return $resource('/web/place/:placeId', {}, {
        query: {method:'GET', params:{placeId:'list'}, isArray:true}
    });
});


services.factory('GoogleMaps', function() {
    var map_id  = '#map';
    var lat     = -25;
    var lng     = 133;
    var zoom    = 16;
    var map     = initialize(map_id, lat, lng, zoom);

    console.log(map);
    return map;

    function initialize(map_id, lat, lng, zoom) {
        var myOptions = {
            zoom : zoom,
            center : new google.maps.LatLng(lat, lng),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        console.log(myOptions);

        return new google.maps.Map($(map_id)[0], myOptions);
    }
});

<div id="map" style="width: 100%;"></div>