Can't center google map

1

While I try to wrap my head around Google Maps AngularJS directives, the ionic framework, angular directives in general and the possible ways of embedding a google map in an app, maybe someone could help me with this specific issue:

I want to set the center of an instantiated google map by providing a new latitude and longitude.

This doesn’t work:

$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));

It returns Uncaught TypeError: undefined is not a function

This does not work either:

$scope.map.control.refresh({latitude: pos.coords.latitude, longitude: pos.coords.longitude});

It returns: Uncaught TypeError: Cannot read property 'refresh' of undefined

I embedded the map using the method provided on Google Maps for AngularJS.

I know there’s this different approach on creating using a ‘map’ directive, but that confuses me a bit. What’s the difference between using this method and the Google Maps for AngularJS method?

By the way, using the Google Maps for Angular JS, I’m loading these two extra sources that are kind of heavy:

<script src='lib/lodash/dist/lodash.compat.js'></script>
<script src='lib/angular-google-maps/dist/angular-google-maps.js'></script>

Thanks a lot.

2

$scope.map.center.latitude = 45;
$scope.map.center.longitude = -74;
$scope.$apply();

2 Likes
3

Hi Isaac,
I had the same problem and didn’t know why it wasn’t doing what it was supposed to do… good news: I found the solution. Maybe you already found it yourself :wink:

First of all, this works!:

$scope.map.control.refresh({latitude: pos.coords.latitude, longitude: pos.coords.longitude});

But, to get it to work you need to add an empty control object to your map, the one on your $scope.

$scope.map = {
   center:{ latitude:49,longitude: 8},
   control:{}
}

And, you need to add control=“map.control” to your <google-map …> markup.

<google-map center="map.center" zoom="map.zoom" draggable="true" events='map.events' control="map.control"></google-map>

And now, your control object isn’t undefined anymore and you can update/refresh your view as often as you want.

4

When I try

$scope.map.control.refresh({latitude: pos.coords.latitude, longitude: pos.coords.longitude});

I get TypeError: undefined is not a function