Shorn Jacob Shorn Jacob - 1 year ago 86
AngularJS Question

Pass an object as part of ng-map marker

Using markers in

with angular JS

<ng-map zoom-to-include-markers="auto" default-style="false" class="myMap">
<marker ng-repeat="Customer in ListForDisplay" position="{{}},{{Customer.location.lng}}" icon="{{Customer.icon}}" clickedaddress="{{Customer.address}}" clickedextras="{{Customer.extrasString}}" data="{{Customer}}" on-click="markerSingleClick($event)" on-dblclick="markerDoubleClick($event)"></marker>

I can access the string variables in the controller, but the object data still stays undefined in debugging sessions:

$scope.markerSingleClick = function (event) {
var clickedaddress = this.clickedaddress;
var clickedextras = this.clickedextras;
var data =;

Is there a way to pass an entire object as part of the marker, rather than single string properties

Answer Source

To pass current object as a parameter via marker on-click event, replace




and then update markerSingleClick function:

$scope.markerSingleClick= function (event,customer) {

Working example

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

        NgMap.getMap().then(function (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,city) {
<script src=""></script>
    <script src=""></script>
    <script src=""></script> 
<div ng-app="mapApp" ng-controller="mapCtrl">
        <ng-map zoom="5" center="59.339025, 18.065818">            
            <marker ng-repeat="c in cities" position="{{c.pos}}" title="{{}}" id="{{}}" on-click="showInfo({{c}})">

Another option would be to pass object identifier as a parameter, for example its index:

<marker ng-repeat="c in cities" on-click="showInfo($index)" position="{{c.pos}}" title="{{}}" id="{{}}">

Then current object could be determined like this:

$scope.showInfo = function (event,index) {
     var currentCity = $scope.cities[index]; 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download