AngularJS, NgMap and GoogleMaps Api (infowindow function error)

Question

I'm going to initalize infowindows (for google map markers) through angular controller (i'm using ng-map module)

NgMap.getMap().then (map) ->
  $scope.map = map
  for marker in markers
    latLng = new (google.maps.LatLng)(marker.latitude, marker.longitude)
    #initialize infoWindows through google map api, not ng-map module
    contentString = 'is an example string'
    infoWindow = new (google.maps.InfoWindow)(content: contentString)
    $scope.dynMarkers.push new (google.maps.Marker)(position: latLng)
    marker.addListener 'click', ->
      infoWindow.open map, marker
  $scope.markerClusterer = new MarkerClusterer(map,$scope.dynMarkers, {})

I have an error in console:

marker.addListener is not a function

I can't use an ng-map 'infowindow' DOM element in my view. What's wrong?

score 0 · Answer 1 · answered Dec 20 '16 at 11:02

marker object needs to be of google.maps.Marker type, try to replace:

$scope.dynMarkers.push new (google.maps.Marker)(position: latLng)
marker.addListener 'click', ->
  infoWindow.open map, marker

with

markerObject = new (google.maps.Marker)(position: latLng)  #<-Marker object 
$scope.dynMarkers.push markerObject
markerObject.addListener 'click', ->
  infoWindow.open map, markerObject

Example

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

        NgMap.getMap().then(function (map) {
            $scope.map = map;
            $scope.dynMarkers = [];
            $scope.markers.forEach(function (marker) {
                var latLng = new google.maps.LatLng(marker.latitude, marker.longitude);
                var contentString = 'is an example string'
                var infoWindow = new (google.maps.InfoWindow)({ content: contentString });
                var dynMarker = new google.maps.Marker({ position: latLng });
                $scope.dynMarkers.push(dynMarker);
                google.maps.event.addListener(dynMarker, 'click', function () {
                    infoWindow.open(map,dynMarker);
                });
            });
            var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
            $scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, mcOptions)
        });

        $scope.markers = [
            { id: 1, name: 'Oslo', latitude: 59.923043, longitude: 10.752839 },
            { id: 2, name: 'Stockholm', latitude: 59.339025, longitude: 18.065818 },
            { id: 3, name: 'Copenhagen', latitude: 55.675507, longitude: 12.574227 },
            { id: 4, name: 'Berlin', latitude: 52.521248, longitude: 13.399038 },
            { id: 5, name: 'Paris', latitude: 48.856127, longitude: 2.346525 }
        ];

    });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
    <ng-map default-style="true" zoom="3" center="59.339025, 18.065818">
    </ng-map>
</div>

AngularJS, NgMap and GoogleMaps Api (infowindow function error)

1 Answers1