Hi, I’ve been searching and trying many different things to try and get my links to open outside of my app but to no avail. What I’m currently doing is looping through my API call which returns a bunch of locations. I then place points on the map and set the bounds for the map. When the user taps on the pin, I then have a infoWindow popup with the name of the location, address, and then a button to get directions in the native maps app. No matter what I try, I can’t seem to get these links to open in either the native maps app (iOS/Android) or the system browser.
I have tried using target="_blank", target="_system", window.open (which fails miserably).
Here is my controller code:
.controller('LocationsMapCtrl', function($scope, $ionicLoading, $ionicPopup, LocationsService, $localStorage, $compile, cordovaGeolocationService) {
$scope.$storage = $localStorage;
$scope.locations = [];
$scope.locations = LocationsService.all();
$scope.navTitle = "Map of Locations";
var pinImage = {
url: 'assets/img/map-pin.png',
size: new google.maps.Size(27, 80),
scaledSize: new google.maps.Size(13.5, 40),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 40)
};
// Google Maps
function initializeMapAll() {
var mapOptions = {
center: new google.maps.LatLng(33.953349,-117.396156),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_all"), mapOptions);
// Stop the side bar from dragging when mousedown/tapdown on the map
google.maps.event.addDomListener(document.getElementById('map_all'), 'mousedown', function(e) {
e.preventDefault();
return false;
});
$scope.map = map;
var locations = $scope.locations;
var bounds = new google.maps.LatLngBounds();
$scope.bounds = bounds;
var infowindow = new google.maps.InfoWindow({
content: compiled
});
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var latLng = new google.maps.LatLng(locations[i].location.geo[1], locations[i].location.geo[0]);
var locationString = location.location.street1+'+'+location.location.suburb+'+'+location.location.state+'+'+location.location.postcode;
if (ionic.Platform.isAndroid()) {
var url = 'geo:0,0?q=' + locationString;
url = encodeURI(url);
var contentString = '<div style="width:200px;"><h4>' + location.commonName + '</h4><p>' + location.location.street1 + '<br>'+location.location.suburb+', '+location.location.state+' '+location.location.postcode+'</p><p><a href="/#/app/loc/'+location._id+'/detail" class="button button-small button-positive">View Details</a> <a href="'+url+'" class="button button-small button-positive" target="_system">Get Directions</a></p></div>';
} else if (ionic.Platform.isIOS()) {
if ($scope.$storage.currentLocation != null) {
var url = 'http://maps.apple.com/?daddr=' + locationString + '&saddr=' + $scope.$storage.currentLocation.coords.latitude + ',' + $scope.$storage.currentLocation.coords.longitude;
} else {
var url = 'http://maps.apple.com/?q=' + locationString;
}
url = encodeURI(url);
var contentString = '<div style="width:200px;"><h4>' + location.commonName + '</h4><p>' + location.location.street1 + '<br>'+location.location.suburb+', '+location.location.state+' '+location.location.postcode+'</p><p><a href="/#/app/loc/'+location._id+'/detail" class="button button-small button-positive">View Details</a> <a href="'+url+'" class="button button-small button-positive" target="_system">Get Directions</a></p></div>';
} else {
var contentString = '<div style="width:200px;"><h4>' + location.commonName + '</h4><p>' + location.location.street1 + '<br>'+location.location.suburb+', '+location.location.state+' '+location.location.postcode+'</p><p><a href="/#/app/loc/'+location._id+'/detail" class="button button-small button-positive">View Details</a> <a href="http://maps.google.com/?q='+locationString+'" class="button button-small button-positive" target="_system">Get Directions</a></p></div>';
}
var compiled = $compile(contentString)($scope);
bounds.extend(latLng); // Create a new viewpoint bound
// Add Marker
var marker = new google.maps.Marker({
position: latLng,
map: $scope.map,
title: location.commonName,
icon: pinImage
});
bindInfoWindow(marker, map, infowindow, contentString); // Add Marker to viewpoint bound
}
$scope.map.fitBounds(bounds);
//$scope.centerOnMe();
}
function bindInfoWindow(marker, map, infowindow, contentString) {
google.maps.event.addListener(marker, 'click', function(event) {
infowindow.setContent(contentString);
infowindow.open($scope.map, marker);
});
}
//google.maps.event.addDomListener(window, 'load', initialize);
if (document.getElementById('map_all')) {
initializeMapAll();
}
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
var currentLocImage = {
url: 'assets/img/map-bluedot.png',
size: new google.maps.Size(44, 44),
scaledSize: new google.maps.Size(22, 22),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 22)
};
if ($scope.$storage.currentLocation != null) {
console.log("already has location");
currentPos = new google.maps.LatLng($scope.$storage.currentLocation.coords.latitude, $scope.$storage.currentLocation.coords.longitude);
$scope.map.setCenter(currentPos);
$scope.bounds.extend(currentPos);
var marker = new google.maps.Marker({
position: currentPos,
map: $scope.map,
icon: currentLocImage
});
$scope.map.fitBounds($scope.bounds);
} else {
$ionicLoading.show({
content: '<i class=\'ion-ios7-reloading\'></i><br/>Getting current location...',
showBackdrop: false
});
cordovaGeolocationService.watchPosition(function(pos) {
var coords = $scope.$storage.currentLocation = [
pos.coords.latitude,
pos.coords.longitude
];
currentPos = new google.maps.LatLng($scope.$storage.currentLocation[0], $scope.$storage.currentLocation[1]);
$scope.map.setCenter(currentPos);
var marker = new google.maps.Marker({
position: currentPos,
map: $scope.map,
icon: currentLocImage
});
$scope.map.setZoom(18);
$ionicLoading.hide();
}, function(error) {
$ionicPopup.alert({
title: 'Unable to get location: ' + error.message
}).then(function(res) {
$ionicLoading.hide();
// reset the view to default
initializeMapAll();
});
});
}
};
})
Any ideas would be greatly appreciated! Thanks!