Using Event Listeners With NgMap

I'm using Allenhwkim's wonderful ngMap in a project. I know that I need to use Maps Javascript v3 API to manipulate the map, which is going well except that I can't get any event l

Solution 1:

You can use ngMap's specific UI event methods.

Check out this documentation: https://ngmap.github.io/events.html#/event-simple#event-simple

also sample code:

HTML:

<div ng-controller="EventSimpleCtrl" class="ng-scope">
      <map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">
        <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker> 
      </map>
    </div>

JavaScript:

 $scope.click = function(event) {
      map.setZoom(8);
      map.setCenter(marker.getPosition());
    }

Sample code link: http://plnkr.co/edit/mli6jTMwGE9k35GFPZT9?p=preview

Edit:

You can use google.maps.event.addListener, but you need to create variables to hold your marker, and add the listeners to the markers.

You can change the code in your script.js to the following:

var app = angular.module('myApp', ['ngMap']);

  app.controller('mapController', function($scope, $http, $interval) {
    var map;
    $scope.dynMarkers = [];
    $scope.$on('mapInitialized', function(event, evtMap) {
      map = evtMap;
      for (var i=0; i<1000; i++) {
        var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]);
        var marker = new google.maps.Marker({position:latLng});
        $scope.dynMarkers.push(marker);

        google.maps.event.addListener(marker, 'click', function() {

            alert("this is marker " + i);
        });

      }
      $scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, {});
    });
  });

Notice this line var marker = new google.maps.Marker({position:latLng}); You can try in this link: http://plnkr.co/edit/LiblBBvauGnn67xOy96D?p=preview