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?