on-click marker in ngMap with id?

Question

I am using ngMap to display a map with markers on it. I want to redirect the user to a URL, when he clicks a marker. To build this URL, i need a unique id, from the repeat.

I have this;

<marker ng-repeat="position in ctrl.positions" position="{{position.x}}, {{position.y}}" on-click="ctrl.goto(ctrl.id)"></marker>

In my controller i have

vm.clickRedirect = function(pId) {
    console.log(pId);
}

I just return the object, and the actual id (ctrl.id). How do i achive this?

How do i get the id, from my result (ctrl.id) over to my click event. As written, the current code passes a map object, and not the actual int id. — brother, Mar 03 '16 at 20:00
do you have the id in the positions array? It is not clear what you are asking, just making a guess `on-click="ctrl.clickRedirect(position.id)"` — Sarantis Tofas, Mar 03 '16 at 23:27
This worked: on-click="ctrl.clickRedirect(event, {{ctrl.id}})" but this did not work: on-click="ctrl.clickRedirect({{ctrl.id}})". It keept sending event as the first paramater, no matter what. Thanks for the help guys. — brother, Mar 04 '16 at 03:31

score 3 · Answer 1 · answered Oct 03 '16 at 08:18

To pass object identifier as a parameter via on-click event replace clickRedirect function to:

vm.clickRedirect = function(event,pId) {
    console.log(pId); 
}

Working example

angular.module('mapApp', ['ngMap'])
    .controller('mapCtrl', function ($scope, NgMap) {


        NgMap.getMap().then(function (map) {
            $scope.map = map;
        });
        $scope.cities = [
            { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
            { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
            { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
            { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
            { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
        ];

        $scope.showInfo = function (event,id) {
              $scope.selectedCity = $scope.cities.filter(function(c){
                  return c.id === id;  
              })[0]; 
        };
    });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="mapApp" ng-controller="mapCtrl">
        <div>Selected city: {{selectedCity}}</div>
        <ng-map zoom="4" center="59.339025, 18.065818">            
            <marker ng-repeat="c in cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showInfo(c.id)">
            </marker>
        </ng-map>
</div>

score 0 · Answer 2 · answered Mar 03 '16 at 20:01

0

on-click is not an angular expression you need to use angular expression to evaluate ctrl.id
like this : {{ctrl.id}}
Or did you mean to use ng-click?

answered Mar 03 '16 at 20:01

M B

2,326
24
33

I tried this earlier, but it does the same thing: on-click="ctrl.clickRedirect({{ctrl.id}})" – brother Mar 03 '16 at 20:10
ng-click wont work according to http://stackoverflow.com/questions/24477634/angularjs-google-maps-ng-click-inside-marker – brother Mar 03 '16 at 20:11

on-click marker in ngMap with id?

2 Answers2