rakete rakete - 5 months ago 117
AngularJS Question

Redirect to other page on click on Google Maps marker

I am developing my first AngularJS2 app with a Google map. I want to forward the user to another page (using AngularJS Routing) when clicking a marker.

At the moment nothing happens. I think it's a general problem of understanding the events in AngularJS...

angular.module('starter.controllers').controller('MapCtrl', function($scope, $location, $rootScope) {

var myLatlng = new google.maps.LatLng(50.413192, 8.033106);

var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var myLatlnggg = new google.maps.LatLng(55.413192, 8.033106);
var marker = new google.maps.Marker({
position: myLatlnggg,
map: map,
title: 'Hello World!'
});

$scope.marker = marker;

google.maps.event.addListener($scope.marker, 'click', function(){
$location.path( '/spot' );
});

})

Answer

For events that occur outside angular context use $scope.$apply() to advise angular of changes

google.maps.event.addListener($scope.marker, 'click', function(){
  $scope.$apply(function(){
      $location.path( '/spot' );
  });     
});
Comments