Opening Native Map Apps From The Mobile Browser

People may argue about their preference of the native apps for Google Maps and Apple Maps. But there is no question that either of those apps are a vastly superior experience than trying to get directions in the mobile web version of Google Maps.

Google seems to agree. It’s nearly impossible to try to get directions to a location without nag messages everywhere asking you to use their native apps. They have messages in the header, in the footer, and in the menu bar. They want you out of the web version of Google Maps. Badly.

Nag messages everywhere! Google *really* wants you using their app instead of the web version.

If I just make a simple link to Google Maps, Android recognizes this and redirects me to the app. But iOS doesn’t. While it might be easy to dismiss this as an Apple limitation, this is an important problem to fix. We don’t want to send our iOS users to a clearly inferior mapping experience. If this is a potential converting customer, we want to make the experience as great as possible, right?

So here’s the crux of our question: how do I create a link that opens in a native app on iOS and Android while desktop users get the standard Google Maps experience in their browser?

Let’s first look at our HTML. For our example, we will have an image that users will click on to get directions to our location. We won’t put our link to Google Maps in our HTML though. Instead let’s run the function mapsSelector() when the image is clicked on.

<img src="directions-icon.png" onclick="mapsSelector()" />

Now let’s write our JavaScript. Depending on your site audience and requirements, we could add more to this function. But let’s start basic and worry about Android and iOS only.

On iOS, if we use a standard link to Google Maps, our users will get the crappy web app version instead of it opening in Apple Maps. On Android, if we link to Google Maps, Android will open the native app instead of displaying the web app.

The key to note is that iOS users need a different link. Android users and desktop users can use the standard Google Maps link. How do we do that? And what’s the difference in the two links? Here’s the code.

function mapsSelector() {
  if /* if we're on iOS, open in Apple Maps */
    ((navigator.platform.indexOf("iPhone") != -1) || 
     (navigator.platform.indexOf("iPad") != -1) || 
     (navigator.platform.indexOf("iPod") != -1))
    window.open("maps://maps.google.com/maps?daddr=<lat>,<long>&amp;ll=");
else /* else use Google */
    window.open("https://maps.google.com/maps?daddr=<lat>,<long>&amp;ll=");
}

What we are doing first is checking if the device is an iPhone, iPad, or iPod Touch. If it is, instead of using https://maps.google.com, we will use maps://maps.google.com/. iOS will see this and instead open Apple Maps or the iOS version of Google Maps.

If our user isn’t on iOS, we let Google decide which version to serve you. Android users will start loading the web app and then be redirected to the native app. Desktop users will continue onward to the web app, which is what we want.

Here’s a link to a functioning CodePen example if you’d like to experiment or copy the code.

In my example, we have <lat> and <long> in the URL. You’d want to replace these with whatever your location’s coordinates are. If we wanted to bring our users to the directions screen instead, we can do that as well by adding /dir/ directly before the ? in the URL. The key is protocol at the beginning of the URL. iOS users get maps:// and everyone else gets https://.

If we do that, we ensure that everyone on iOS and Android gets a native mapping experience. Success!