javascript - Angular-google-maps 不显示地图

Question

我是 Angular 的新手并且喜欢它。我一直在潜得更深并取得成功，直到这个特定的深度。

我从 ( http://kcy.me/1bbra )分叉了一个在很大程度上满足我需求的可行代码。

一切正常。但是地图不显示。我进入 chrome 的控制台进行调试，一切似乎都很好。地图正在加载并响应按钮但不显示。

经过数小时的调试，我发现当我初始化会话时，地图不显示，当我注释掉会话代码时，一切正常。

在这里查看我的代码

这是我仪表板上的代码

<?php 
require '../scripts/master.php';
$logs = new authenticate();
$logs->page_protect();


//just collecting data from specified table
$rows  = $logs->getFilteredDetails("user_info","app_id",$_SESSION['my_user_id']);

//assessing individual records
$my_user_id = $rows['user_id'];


?>

来自认证类的页面保护功能

function page_protect() 
    {
        session_start();

        if (!isset($_SESSION['my_user_id']))
        {
        header("Location: ../login.php");
        }
}

这是在我的仪表板页面上显示地图的部分

<section class="content">       
        <div ng-controller="MapCtrl">
        <div class="map_container">
            <google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" control="map.control">
                <markers models="map.markers" coords="'self'" options="'options'" isLabel='true'>
                </markers>
            </google-map>
        </div>  
        <div class="controls">
            <h3>Current location</h3>
            <p>
                <button ng-click="addCurrentLocation()">Current location</button>                
            </p>
            <h3>Address search</h3>
            <p>
                <input type="text" placeholder="Address. i.e: Concha Espina 1, Madrid" ng-model="address" style="width: 210px"/>
                <button ng-click="addAddress()">Look up!</button>    
            </p>
            <p>
                <a href="http://kcy.me/1bbra" target="_blank">Source Code</a>
            </p>
        </div>
    </div>
    </section>

最后，角码

var app = angular.module('AngularGoogleMap', ['google-maps']);

app.factory('MarkerCreatorService', function () {

var markerId = 0;

function create(latitude, longitude) {
    var marker = {
        options: {
            animation: 1,
            labelAnchor: "28 -5",
            labelClass: 'markerlabel'    
        },
        latitude: latitude,
        longitude: longitude,
        id: ++markerId          
    };
    return marker;        
}

function invokeSuccessCallback(successCallback, marker) {
    if (typeof successCallback === 'function') {
        successCallback(marker);
    }
}

function createByCoords(latitude, longitude, successCallback) {
    var marker = create(latitude, longitude);
    invokeSuccessCallback(successCallback, marker);
}

function createByAddress(address, successCallback) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address' : address}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var firstAddress = results[0];
            var latitude = firstAddress.geometry.location.lat();
            var longitude = firstAddress.geometry.location.lng();
            var marker = create(latitude, longitude);
            invokeSuccessCallback(successCallback, marker);
        } else {
            alert("Unknown address: " + address);
        }
    });
}

function createByCurrentLocation(successCallback) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var marker = create(position.coords.latitude, position.coords.longitude);
            invokeSuccessCallback(successCallback, marker);
        });
    } else {
        alert('Unable to locate current position');
    }
}

return {
    createByCoords: createByCoords,
    createByAddress: createByAddress,
    createByCurrentLocation: createByCurrentLocation
};

});

app.controller('MapCtrl', ['MarkerCreatorService', '$scope', function (MarkerCreatorService, $scope) {

    MarkerCreatorService.createByCoords(40.454018, -3.509205, function (marker) {
        marker.options.labelContent = 'Autentia';
        $scope.autentiaMarker = marker;
    });

    $scope.address = '';

    $scope.map = {
        center: {
            latitude: $scope.autentiaMarker.latitude,
            longitude: $scope.autentiaMarker.longitude
        },
        zoom: 12,
        markers: [],
        control: {},
        options: {
            scrollwheel: false
        }
    };

    $scope.map.markers.push($scope.autentiaMarker);

    $scope.addCurrentLocation = function () {
        MarkerCreatorService.createByCurrentLocation(function (marker) {
            marker.options.labelContent = 'You´re here';
            $scope.map.markers.push(marker);
            refresh(marker);
            //alert("I reached");
        });
    };

    $scope.addAddress = function() {
        var address = $scope.address;
        if (address !== '') {
            MarkerCreatorService.createByAddress(address, function(marker) {
                $scope.map.markers.push(marker);
                refresh(marker);
            });
        }
    };

    function refresh(marker) {
        $scope.map.control.refresh({latitude: marker.latitude,
            longitude: marker.longitude});
    }

}]);