Opening Native Mapping App from your Mobile Hybrid App

In a current project for a client, we are using Sencha Touch for our mobile hybrid development framework.  One of the features of the app is to open the native mapping app and displaying a map of the address passed in.  When researching this, there are many sites that have misleading information that result in the map being displayed in your current mobile hybrid app instead of in the native mapping app.  This article will show you how to use Cordova and Sencha Touch to open the native mapping app.

Cordova Plugin

Once you have created a Sencha Touch application, in order to open the Native Mapping App you need to install the following Cordova plugin.


If you are new to Cordova, then the following command will install the plugin.

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

To learn more about this plugin, please see the following links:


In order to verify that you have installed the plugin correctly, you should be able to run the following code when on a device.

     var myDevice = Ext.device.Device;
     if (myDevice)
          console.log(myDevice.name);

Note:  Trying to access the device when running the app via your emulator will not work.

Android Implementation

The following sections explain Android intents and how to use Sencha Touch to open the Native Mapping App from your Mobile App.

Android Intents

In order to understand how to interact with another app on an Android device, you need to know what “Common Intents” are.  An intent allows you to start an activity in another app by sending the simple command you would like to perform such as “Open a map” or “Create a Calendar Event”.

For Android, here are some intents for the following:


For more complete documentation, please see the following link:


Android Mapping Intents

You can pass in the latitude and longitude as well as a zoom.  Or you could pass in the latitude and longitude with a label.  For our current app, we are only interesting in showing a map of a given location by address.  Either, way the intent for mapping must start with geo.
For our scenario, we format the request using the following:

     geo:0,0?q=my+street+address

Note:  All strings must be encoded.

Opening the Map App on Android devices

In Sencha Touch, opening the Map App is very simple once you have the Cordova Plugin.  Here is the following code:

var queryString = encodeURIComponent(‘Blue Bell’) + “,+” + encodeURIComponent(‘PA’);
var url = 'geo:0,0?q='  + queryString;
Ext.device.Device.openURL(url)

Now, there is no black magic being performed by Sencha Touch.  All it does is call window.location.  So obviously, you do not need Sencha Touch to use this functionality in your Mobile Hybrid App.

iOS Implementation

The following sections explain iOS intents and how to use Sencha Touch to open the Native Mapping App from your Mobile App.

URL Schemes

In iOS, you need to understand URL Schemes when interacting with other apps.  The URL Scheme is documented and can be used to open a map app or send an email.  The following list contains the iOS URL Schemes that are available:


See the following documentation:

iOS Mapping URL Scheme

In the Apple Developer documentation, it states to use the following URL Scheme:
   
     http://maps.apple.com/?q=

However, that did not work well for us.  Instead we used the following format which worked best on iOS 7 and 8 devices.

     maps:q=

Opening the Map App on iOS devices

In Sencha Touch, opening the Map App is very simple once you have the Cordova Plugin.  Here is the following code:

     var queryString = encodeURIComponent(‘Blue Bell’) + “,+” + encodeURIComponent(‘PA’);
     var url = 'maps:q='  + queryString;
     Ext.device.Device.openURL(url)

Again, there is no black magic being performed by Sencha Touch.  All it does is call window.location.  So obviously, you do not need Sencha Touch to use this functionality in your Mobile Hybrid App.

Conclusion

This approach will now allow you to open a Native Mapping App from your Hybrid App.  This same approach can be used to make phone calls from your Hybrid App as well as many other features your might need.  In addition, you can create your own custom Android Intent or iOS custom URL Scheme so two app you have written can easily interact.

Labels: , , ,