Native Map Navigation

You can use navigation feature on the phone by calling native map applications. The URI schemes and parameters declared on Apple Developers and Google Map Documentation. You can use Apple Developers reference for iOS only but you can use Google Map Documentation for both iOS and Android. If maps not installed on devices, maps with navigation opens in the browser. The following example shows how to open default map application on the mobile device.

JavaScript
JavaScript
e/ui/flexlayout");
const Application = require("sf-core/application");
const System = require("sf-core/device/system");
var page1 = extend(Page)(
function(_super) {
_super(this);
var btnMapsNavigation = new Button({
height: 75,
width: 100,
margin: 10,
text: "Maps Navigation Smartface",
backgroundColor: Color.BLUE,
textColor: Color.WHITE,
onPress: function(){
if(System.OS === "Android"){
Application.call("https://www.google.com/maps/dir/",{
"api": "1",
"travelmode": "walking",
"dir_action": "navigate",
"destination": "37.4492751,-122.1620912",
});
}
else{
Application.call("http://maps.apple.com/",{
"daddr": "37.4492751,-122.1620912",
"dirflg": "w"
});
}
}
});
var btnMapsNavigationAHL = new Button({
height: 75,
width: 100,
margin: 10,
text: "Maps Navigation Ataturk Airport",
backgroundColor: Color.BLUE,
textColor: Color.WHITE,
onPress: function(){
if(System.OS === "Android"){
Application.call("https://www.google.com/maps/dir/",{
"api": "1",
"travelmode": "walking",
"dir_action": "navigate",
"destination": "40.9829888,28.8104425",
});
}
else{
Application.call("http://maps.apple.com/",{
"daddr": "40.9829888,28.8104425",
"dirflg": "w"
});
}
}
});
this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.addChild(btnMapsNavigation);
this.layout.addChild(btnMapsNavigationAHL);
}
);
module.exports = page1;

List Available Navigation Apps on Android

JavaScript
JavaScript
Application.call(`geo:${location.latitude},
${location.longitude}?q=${location.latitude},${location.longitude}`, "",
function() {},
function() {}, true, "");