I’ve been working on building an app with Ionic2 and Angular2 lately. One requirement we have is to launch the native maps app with both a single location and sometimes with a route. Searching the web I found a plethora of attempts and none seemed to really work reliably.

In this post I will explain how to easily launch the native maps app from an Ionic application. For bonus points, I’ll show how to choose between Apple Maps and Google Maps on the iOS platform (and perhaps leaving this as a choice for your users).

Launch a map with a single pin

It’s really rather simple. Just create a link with a target set to _system. Like this:

<a button href="LINK" target="_system">Map</a>

Notice the target is _system. This is what tells the webview to launch an extern application.

Now, depending on your platform and desired result, you’ll construct the LINK in different ways.

Launch Maps With a Single Pin

iOS (launching Apple Maps):
<a href="maps:?q=LOCATION" target="_system">Map</a>

iOS (launching Google Maps):
<a href="comgooglemaps://?q=LOCATION" target="_system">Map</a>

Android:
<a href="geo:?q=LOCATION" target="_system">Map</a>

Launch Maps With Directions From Current Location

iOS (launching Apple Maps):
<a href="maps:?daddr=LOCATION" target="_system">Map</a>

iOS (launching Google Maps):
<a href="comgooglemaps://?daddr=LOCATION" target="_system">Map</a>

Android:
<a href="geo:?daddr=LOCATION" target="_system">Map</a>

Other Tricks

This also works with SMS, Phone, and Email to launch their respective apps. Be sure to add the target="_system"!

Call A Phone Number:
<a button href="tel:555-555-5555" target="_system">Call</a>

Text A Phone Number:
<a button href="sms:555-555-5555" target="_system">Text</a>

Email Someone:
<a button href="mailto:someone@example.com" target="_system">Email</a>