Angular google maps click event: Cannot read property 'click' of undefined

Question

I'm using angular google maps with ionic framework and trying to get coordinates on click. In view directive is injected like so

<ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="true" options="map.options" events="map.events"></ui-gmap-google-map>

And here is my controller part

angular.extend($scope,

  $scope.map = {
    center: {latitude: 53.902407, longitude: 27.561621 },
    zoom: 15,
    options: {
      maxZoom: 16,
      minZoom: 13,
      styles: mapStyles.bright
    },
    events: {
      click: function (mapModel, eventName, originalEventArgs) {
        $log.info("user defined event: " + eventName, mapModel, originalEventArgs);

        var e = originalEventArgs[0];
        var lat = e.latLng.lat(),
          lon = e.latLng.lng();
        console.log('You clicked here ' + 'lat: ' + lat + ' lon: ' + lon);
        //scope apply required because this event handler is outside of the angular domain
        $scope.$apply();
      }
    }
  });

Event part is basically copy-pasted from examples in docs. However, when I click it, I get an error

Where did I go wrong?

UPD Somehow $scope.map.events is undefined, although I can, for instance, console.log it and see that it's defined before the error occurs. Same error is happening for all events. For example,

 events: {
        tilesloaded: function (map) {
            $scope.$apply(function () {
                $scope.mapInstance = map;
                $log.info('tiles loaded');
            });
        }
 }

returns

Uncaught TypeError: Cannot read property 'tilesloaded' of undefined

in console with the same stacktrace.

Try putting your scope.apply into a function

code
– code

2015-09-15 23:14:36 +00:00
Commented Sep 15, 2015 at 23:14 — code
– code, Commented Sep 15, 2015 at 23:14
Did you solve this? I have the same issue.

CuriousCoder
– CuriousCoder

2016-05-30 18:03:57 +00:00
Commented May 30, 2016 at 18:03 — CuriousCoder
– CuriousCoder, Commented May 30, 2016 at 18:03

zoma13 · Accepted Answer · 2016-10-10 07:34:53Z

0

You have mixed two ways of bringing something into scope; assignment to scope and extending scope. Either extend the $scope with an object (ie not $scope.map =) and your code becomes...

angular.extend($scope,{
  map: {
    center: {latitude: 53.902407, longitude: 27.561621 },
    zoom: 15,
    options: {
      maxZoom: 16,
      minZoom: 13,
      styles: mapStyles.bright
    },....
})

or use assignment to scope

$scope.map = {
  center: {latitude: 53.902407, longitude: 27.561621 },
  zoom: 15,
  options: {
    maxZoom: 16,
    minZoom: 13,
    styles: mapStyles.bright
  },....

http://moduscreate.com/angularjs-tricks-with-angular-extend/

answered Oct 10, 2016 at 7:34

zoma13

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular google maps click event: Cannot read property 'click' of undefined

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related