angular-google-maps: could not find a valid center property?

Question

I'm trying to get angular-google-maps to work. I've got everything setup per the instructions, but I can't seem to get around this error:

angular-google-maps: could not find a valid center property

I've got this in my page controller:

angular.extend($scope, {
   center: {
    latitude: 0, // initial map center latitude
    longitude: 0, // initial map center longitude
   },
   markers: [], // an array of markers,
   zoom: 8, // the zoom level
});

And this in my html

<google-map center="center" zoom="zoom" markers="markers" refresh="!isMapElementHidden" style="height: 400px"></google-map>

Few points: - It seems that the angular-google-maps directive code is being called before my controller code, so the $scope.center variable is not created yet

When I hardcode a center in it works
I try this, but without any luck as the map never updates to the new cope values set in the controller:

center="center ? center : {latitude: 36.990282103105066, longitude: -122.06149578094482}"
I've also tried to implement Angular Leaflet maps and get the exact same problem

Thanks!

could you provide a plunkr a jsfiddle to demonstrate the problem? — vianney
the longitude should not have a ',' after it, neither should zoom, as its not valid json. although this may be ignored — Ben Taliadoros

Vinod Louis Vinod Louis · Accepted Answer · 2013-10-15T12:06:15

WORKING DEMO

you are not passing the center property moreover i recommend you to use the r1-dev branch directive rather than master branch directive of angular-google-maps, pass the parameters like this

 angular.extend($scope, {
        centerProperty: {
            lat: 45,
            lng: -73
        },
        zoomProperty: 8,
        markersProperty: [ {
                latitude: 45,
                longitude: -74
            }],
        clickedLatitudeProperty: null,  
        clickedLongitudeProperty: null,
    });

or you can also use

position: {
  coords: {
    latitude: 36.990282103105066,
    longitude: -122.06149578094482
  }
},

angular-google-maps: could not find a valid center property?

2 Answers