javascriptangularjsangularjs-ng-repeatgoogle-maps-markersng-map

Marker Info-window not working using ngMap


I am trying to show an info window on google map using . Here's my code:

<div id="map">
  <ng-map zoom="13" center="[{{latitude}}, {{longitude}}]" style="display: block; height: 100%;">
    <marker ng-repeat="pothole in potholeData" position="{{pothole.lat}},{{pothole.lng}}" on-click="showDetails(e, pothole)"></marker>
  </ng-map>
</div>

I am giving an on-click function on each marker with a lat and long value. but in my controller I am getting undefined value.

Here's my controller:

$scope.showDetails = function(e, pothole) {
  var infowindow = new google.maps.InfoWindow();
  var center = new google.maps.LatLng(pothole.lat, pothole.lng);

  infowindow.setContent(
    '<h3>' + pothole + '</h3>');

  infowindow.setPosition(center);
  infowindow.open($scope.map);
}

In showDetails function, I am getting pothole undefined. Can someone help me out?


Solution

  • The problem was in on-click="showDetails(e, pothole), change to on-click="showDetails(event, pothole). I have produced snippet working.

    angular.module('mapApp', ['ngMap'])
        .controller('mapController', function($scope, NgMap) {
    
            NgMap.getMap().then(function(map) {
                $scope.map = map;
            });
            $scope.potholeData = [
                { lat: 59.923043, lng: 10.752839 },
                { lat: 59.339025, lng: 18.065818 },
                { lat: 55.675507, lng: 12.574227 },
                { lat: 52.521248, lng: 13.399038 },
                { lat: 48.856127, lng: 2.346525 }
            ];
            $scope.showDetails = function(e, pothole) {
              console.log(pothole);
              var infowindow = new google.maps.InfoWindow();
              var center = new google.maps.LatLng(pothole.lat,pothole.lng);
    
              infowindow.setContent(
                '<h3>' + pothole.lat + " " + pothole.lng + '</h3>');
    
              infowindow.setPosition(center);
              infowindow.open($scope.map);
            };
    
        });
    <script src="https://maps.google.com/maps/api/js"></script>
    <script src="https://code.angularjs.org/1.3.15/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="mapController">
        <ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
            <marker ng-repeat="pothole in potholeData"
                    position="{{pothole.lat}},{{pothole.lng}}" on-click="showDetails(event, pothole)">
            </marker>
        </ng-map>
    </div>