I want to use Angular Google Maps () in my ASP.NET MVC app. I have a map, I have markers and the markerClick shows an alert. However, I would like to be able to get the marker data within markerClick function. Unfortunately data is undefined. Any ideas?

HTML:

<div ng-app="angular-app">
    <div ng-controller="MapController">
        <ui-gmap-google-map center="map.position" zoom="map.zoom" ng-init="initialize()">
            <ui-gmap-markers models="markers" coords="'location'" doCluster="'true'" idkey="markers.id" click="markerClick()"></ui-gmap-markers>
        </ui-gmap-google-map>
    </div>
</div>

JS (only relevant markerClick from my controller):

//...
$scope.markerClick = function (data) {
    alert('data is undefined :-(');
};
//...

EDIT: The question can be also asked another way. How to properly use ui-gmap-markers with ui-gmap-window? The documentation is very poor and the only example is for ui-gmap-marker...

I want to use Angular Google Maps (http://angular-ui.github.io/angular-google-maps) in my ASP.NET MVC app. I have a map, I have markers and the markerClick shows an alert. However, I would like to be able to get the marker data within markerClick function. Unfortunately data is undefined. Any ideas?

HTML:

<div ng-app="angular-app">
    <div ng-controller="MapController">
        <ui-gmap-google-map center="map.position" zoom="map.zoom" ng-init="initialize()">
            <ui-gmap-markers models="markers" coords="'location'" doCluster="'true'" idkey="markers.id" click="markerClick()"></ui-gmap-markers>
        </ui-gmap-google-map>
    </div>
</div>

JS (only relevant markerClick from my controller):

//...
$scope.markerClick = function (data) {
    alert('data is undefined :-(');
};
//...

EDIT: The question can be also asked another way. How to properly use ui-gmap-markers with ui-gmap-window? The documentation is very poor and the only example is for ui-gmap-marker...

• javascript
• angularjs
• asp-mvc
• google-maps
• angular-google-maps

3 Answers 3

I found a great example on plunker.

HTML:

<div ng-app="appMaps">
    <div id="map_canvas" ng-controller="mainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom">

            <ui-gmap-window show="map.window.show"
                            coords="map.window.model"
                            options="map.window.options"
                            closeClick="map.window.closeClick()"
                            templateUrl="'infowindow.tpl.html'"
                            templateParameter="map.window">
            </ui-gmap-window>

            <ui-gmap-markers models="map.markers"
                             coords="'self'"
                             events="map.markersEvents"
                             options="'options'">
            </ui-gmap-markers>

        </ui-gmap-google-map>
    </div>
</div>

JS:

angular.module('appMaps', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function($scope) {
$scope.map = {
  center: {
    latitude: 39.5925511,
    longitude: 2.633202
  },
  zoom: 14,
  markers: [{
    id: 1,
    latitude: 39.5924115,
    longitude: 2.6468146

  }, {
    id: 2,
    latitude: 39.5925511,
    longitude: 2.633202
  }],
  markersEvents: {
    click: function(marker, eventName, model) {
      console.log('Click marker');
      $scope.map.window.model = model;
      $scope.map.window.show = true;
    }
  },
  window: {
    marker: {},
    show: false,
    closeClick: function() {
      this.show = false;
    },
    options: {} 
  }
};
});

Plunker: http://plnkr.co/edit/HUYHuAUgUlUhDd1MRf3D?p=preview

The only problem is that the window displays exactly at the location of the pin, not above the pin. Does anyone have an idea how I can fix this? It does not look good...

EDIT: This resolves the issue of the window:

uiGmapGoogleMapApi.then(function (maps) {
    // offset to fit the custom icon
    $scope.map.window.options.pixelOffset = new google.maps.Size(0, -35, 'px', 'px');
});

Have you tried:

ng-click="markerClick($event)" 

I think this is the way you were trying for, in your original question take the parentheses out and you'll get three variables passed:

The documentation for markers says:

PerModel / or expression binding : event handler executed when clicking a marker. If you provide a function name (e.g. 'markerClick'), you will get three different parameters: the instance of the generated google.maps.Marker you clicked; the event name; the exact clicked marker object you have in the models.

I am also doing what you are doing with a marker, but I thought I'd give this a try with marker even though the documentation is under markers.

In my HTML:

<ui-gmap-marker>
                    <!-- All the other options -->
                    click = 'mapCtrl.markerClicked'>
</ui-gmap-marker>

In my javascript:

this.markerClicked = function(googleMarker, eventName, modelMarker)
    {
        console.log(googleMarker);
        console.log(eventName);
        console.log(modelMarker);
    }

Key was to not put parentheses in the HTML after the function name. I get the google maps instance, the name "click", and a marker with my id in it which is what I need.

Hope this helps.