rakete rakete - 2 years ago 314
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 Source

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

google.maps.event.addListener($scope.marker, 'click', function(){
      $location.path( '/spot' );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download