CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsangular-google-maps
caitlin
caitlin

Reputation: 2819

Markers from one Angular ng-map re-appearing in the wrong view

I've got an Angular 1.5 app running ui-router and NgMap to display Google Maps.

My problem: Markers displayed on the map in one state, with one controller, are reappearing on a different map, in a different state that doesn't even use the same controller.

I've created a Plunker here that shows the issue.

In my MapController, I have to do an NgMap.getMap() to add markers because I'm going to be doing some more advanced work with markers that will be beyond the capabilities of NgMap alone. Still, I don't know why these markers would be carrying over to a different map in a different controller in a different view. Does anyone know of a good way to deal with this?

var routerApp = angular.module('routerApp', ['ui.router', 'ngMap']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/map');

    $stateProvider

        .state('map', {
            controller:"MapController",
            url: '/map',
            templateUrl: 'map.html'
        })
        .state('view', {
            controller:"ViewController",
            url: '/view/?lat&lng',
            templateUrl: 'view.html'
        })


});

routerApp.controller('MapController', function($scope, NgMap, $state) {
  NgMap.getMap({id:"main-map"}).then(function(map){
    markers = [];

    for(i = -180; i < 180; i = i + 30){
      for(j = -85; j < 85; j = j + 30){
       marker = new google.maps.Marker({
          position: {
            lng: i,
            lat: j
          },
          map: map
        });

        marker.addListener('click', function() {
            $state.go("view", {lat: marker.getPosition().lat(), lng:marker.getPosition().lng()});
        });

        markers.push(marker)
      }
    }
  });
});

routerApp.controller('ViewController', function($scope, NgMap, $state, $stateParams) {
  $scope.lat = $stateParams.lat;
  $scope.lng = $stateParams.lng;
});

Upvotes: 2

Views: 1123

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

Surprisingly, but the issue could be resolved by changing the way how markers are initialized on the map.

Changes:

In map.html change

<ng-map id="main-map" center="0, 0" zoom="2">
</ng-map>

to

<ng-map id="main-map" center="0, 0" zoom="2">
   <marker ng-repeat="pos in positions" position="{{pos.lat}}, {{pos.lng}}" on-click="clickMarker()"></marker>
</ng-map>

And then:

routerApp.controller('MapController', function($scope, NgMap, $state) {
    NgMap.getMap({ id: "main-map" }).then(function(map) {
        var markers = [];

        for (i = -180; i < 180; i = i + 30) {
            for (j = -85; j < 85; j = j + 30) {
                var marker = new google.maps.Marker({
                    position: {
                        lng: i,
                        lat: j
                    },
                    map: map
                });

                marker.addListener('click', function() {
                    $state.go("view", { lat: marker.getPosition().lat(), lng: marker.getPosition().lng() });
                });

                markers.push(marker);
            }
        }
    });
});

to 

routerApp.controller('MapController', function($scope, NgMap, $state) {
    NgMap.getMap({ id: "main-map" }).then(function(map) {       
        $scope.positions = [];

        $scope.clickMarker = function(event){
            $state.go("view", {lat: event.latLng.lat(), lng: event.latLng.lng()});
        };

        for (i = -180; i < 180; i = i + 30) {
            for (j = -85; j < 85; j = j + 30) {
                $scope.positions.push({
                        lng: i,
                        lat: j
                    });
            }
        }
    });
});

Modified plunker

Upvotes: 2

Related Questions