How to add on-click event on ngMap marker using component?

Question

I am using ngMap library to integrate Google maps in AngularJS.

I aam having troble using on.click inside my components controller. component code:

(function(){
    angular.module('map')
        .component('mapComponent', {
            templateUrl: 'app/mapComponent/map.html',
            controller: mapController
        });

    mapController.$inject = ['NgMap', '$state'];

    function mapController(NgMap, $state){
        var ctrl = this;
        NgMap.getMap().then(function (map) {
            ctrl.map = map;
        });
        ctrl.markers = [
            {id: 1, lat: 56.951, lng: 24.10, count: 2},
            {id: 2, lat: 56.931, lng: 24.00, count: 2},
            {id: 3, lat: 56.947, lng: 24.14, count: 3},
            {id: 4, lat: 56.924, lng: 24.09, count: 2},
            {id: 5, lat: 56.936, lng: 24.12, count: 2},
            {id: 6, lat: 56.955, lng: 24.10, count: 4},
        ];

        ctrl.openModal = function(event){
            $state.go('welcome');
        }
    }
})();

and template:

<div class="map_wrapper">
    <ng-map default-style="false" 
            center="current-location"
            geo-fallback-center="4.672585, -54.059525">
        <marker ng-repeat="m in $ctrl.markers" position="{{m.lat}},{{m.lng}}" on-click="$ctrl.openModal"></marker>
    </ng-map>
</div>

but I get error:

TypeError: Cannot read property '1' of null
    at new a (https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js:25:28363)
    at Object.getEvents (https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js:25:28734)
    at Object.a [as link] (https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js:25:18317)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:16:230
    at ia (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:81:35)
    at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:66:176)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:58:429)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:58:67
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:62:430
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:59:422) <marker ng-repeat="m in $ctrl.markers" position="{{m.lat}},{{m.lng}}" on-click="$ctrl.openModal" class="ng-scope">

Tried various approaches and searched for similar question but with no luck. In example page there is always used the "old" controller approach.

Answer 1

You are getting this error due to invalid click event declaration at line:

on-click="$ctrl.openModal"
                ^^^^^^^^^
missing parentheses

Marker click event declaration should include parentheses : on-click="openModal()"

Example

 (function () { angular.module('mapApp', ['ngMap']) .controller('mapCtrl', function ($scope,NgMap) { NgMap.getMap().then(function (map) { $scope.map = map; }); $scope.markers = [ { id: 1, lat: 56.951, lng: 24.10, count: 2 }, { id: 2, lat: 56.931, lng: 24.00, count: 2 }, { id: 3, lat: 56.947, lng: 24.14, count: 3 }, { id: 4, lat: 56.924, lng: 24.09, count: 2 }, { id: 5, lat: 56.936, lng: 24.12, count: 2 }, { id: 6, lat: 56.955, lng: 24.10, count: 4 }, ]; $scope.openModal = function (e) { console.log(e.latLng.toString()); } }); })(); 

  <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> <div ng-app="mapApp" ng-controller="mapCtrl"> <ng-map default-style="false" center="56.9713958,23.9898323" zoom="10"> <marker ng-repeat="m in markers" position="{{m.lat}},{{m.lng}}" on-click="openModal($event)"></marker> </ng-map> </div>