I’m trying to navigate when clicking on a google map marker and after a lot of struggle its still not working on my android device. The strange this, is that works on the browser and chrome dev tool emulator.
Heres what I have:
App Config:
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'MapCtrl'
}
},
resolve: {
markers: function(Application){
return Application.GetMarkers();
}
}
})
.state('tab.details', {
url: '/details/:id',
views: {
'tab-map': {
templateUrl: 'templates/details.html',
controller: 'DetailsCtrl'
}
},
resolve:
{
place: function(Application, $stateParams)
{
return Application.getLocation($stateParams.id);
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/map');
In the map controller (MapCtrl):
google.maps.event.addListener(marker, 'click', function () {
$state.go('tab.details', { id: '1' });
});
The thing is, this only does not work on my device, and if I change the marker click handler to the following, the marker navigates:
google.maps.event.addListener(marker, 'click', function () {
$state.go('tab.settings');
});
,