Angular-Google-Map: How to Load Map after Position Data Loaded(Lat, Lng)?

angular-google-maps, angularjs, google-maps, google-maps-api-3, javascript

Solution

Finally, I use `ng-if`, and change `map.isReady` value from `false` to `true` after map initialize.

<div ng-init="locationData = '<?=htmlspecialchars($data)?>'">
    <div ng-if="map.isReady">
        <google-map center="map.center" zoom="map.zoom" options="map.options"></google-map>
    </div>
</div>

It works.

Problem

I got the error: 'angular-google-maps: could not find a valid center property'. when I $watch my locationData loaded from php backend and exec initialize function. HTML: ``` <div ng-init="locationData = '<?=htmlspecialchars($data)?>'"> <google-map center="map.center" zoom="map.zoom" options="map.options"></google-map> </div> ``` Angular Controller: ``` app.controller('MapCtrl', ['$scope', function ($scope) { 'use strict'; $scope.$watch('locationData', function() { var location = JSON.parse($scope.locationData); $scope.location = { lng : location.longitude, lat : location.latitude initialize(); }); function initialize() { var mapOptions = { panControl : true, zoomControl : true, scaleControl : true, mapTypeControl: true, mapTypeId : google.maps.MapTypeId.ROADMAP }; $scope.map = { center: { latitude: $scope.location.lat, longitude: $scope.location.lng }, zoom: 13, options: mapOptions, }; } }]); ``` And, I move $scope.map settings to the top of the controller block and set constant value to map ``` center: { latitude: 0, longitude: 0 }, ``` , map show correctly. Angular Controller: ``` app.controller('MapCtrl', ['$scope', function ($scope) { 'use strict'; var mapOptions = { panControl : true, zoomControl : true, scaleControl : true, mapTypeControl: true, mapTypeId : google.maps.MapTypeId.ROADMAP }; $scope.map = { center: { latitude: 0, longitude: 0 }, zoom: 13, options: mapOptions, }; }]); ``` How can do google map directive parse after data loaded and show map correctly with backend Lat, Lng data?

Original source