How to open a mobile device's map app when a user clicks on a link?

Question

I have a web app where if a user clicks on a link it should open up a map. The best solution that I can think of is to open up a new tab/window to google maps using the target="_blank" attribute.

But I think that it would be best to open up the device's map app instead of google map.

I know that you can have the user's phone app to pop when the user clicks on a phone number with the href attribute pointing to tel:<the phone number>. I am wondering if this is also possible with the map app.

Is there a way to allow an anchor tag to open the mobile device's map app when the user clicks it?

Answer 1

You can use the GEO URI Scheme "geo:latitude,longitude" specified by RFC 5870 in a link such as

<a href="geo:124.028582,-29.201930" target="_blank">Click here for map</a>

There's also the comgooglemaps:, which launches the Google Maps app for iOS, for example:

comgooglemaps://?center=40.765819,-73.975866&zoom=14&views=traffic

Where

• center: This is the map viewport center point. Formatted as a comma separated string of latitude,longitude.
• mapmode: Sets the kind of map shown. Can be set to: standard or streetview. If not specified, the current application settings will be used.
• views: Turns specific views on/off. Can be set to: satellite, traffic, or transit. Multiple values can be set using a comma-separator. If the parameter is specified with no value, then it will clear all views.
• zoom: Specifies the zoom level of the map.

And as techtheatre said, you can use a regular Apple Maps link to trigger Apple Maps:

//maps.apple.com/?q=Raleigh,NC

Leaving off the protocol will automatically select the correct one to use, so if you wanted to have a dynamic link you could just create some conditional code that changes the link between google.com and apple.com depending on which system you're on.

Answer 2

Actually...now that Apple has their own map application, they no longer catch Google maps links and route them into the mapping application (by default...though this can be changed on the device). As such, you now must do some sniffing to determine if the device is Android or Apple. If you use the correct link for the correct mobile OS, the device will catch the intent and instead of using the browser, will go into the mapping app.

If Android, link like this:

https://maps.google.com/?q=Houston,+TX

If Apple, link like this:

http://maps.apple.com/?q=Houston,+TX

This is certainly a pain, and hopefully the W3c will eventually standardize a map trigger (like tel: for phone numbers). Good luck!

Answer 3

No need for anything fancy. You can simply double link the address like so.

<a href='https://maps.google.com/?q=addressgoeshere'>
  <a href='https://maps.apple.com/maps?q=addressgoeshere'>
    Address</a></a>

On Android this will open the Google maps app, and on iOS this will open the Apple maps app. (Untested on Windows phone)

Answer 4

Here's my jQuery solution for this issue. I wanted to be able to detect the correct map to open up. In 2019, microformats still don't automatically make a link for mobile phones.

I used the solution from this article https://medium.com/@colinlord/opening-native-map-apps-from-the-mobile-browser-afd66fbbb8a4 but modified it to make it current and dynamic.

And, modified the code so I could have an address block in my html. That address is stripped to the basics and sent to the appropriate maps app.

HTML

<span class="map-link">6555 Hollywood Blvd<br/>Hollywood, CA 90028</span>

JavaScript

$(document).on('click','.map-link',function() {
    var address = $(this).html();
    address = $('<div/>')
      .html(address)
      .text() // strip tags
      .replace(/\s\s+/g, " "); // remove spaces
    address = encodeURIComponent(address);
    if ((navigator.platform.indexOf('iPhone') != -1) || (navigator.platform.indexOf('iPad') != -1) || (navigator.platform.indexOf('iPod') != -1)){/* if we're on iOS, open in Apple Maps */
        window.open('http://maps.apple.com/?q=' + address);
    } else { /* else use Google */
        window.open('https://maps.google.com/maps?q=' + address);
    }
});

CSS

.map-link { text-decoration: underline; text-decoration-style: dotted;cursor: pointer ;}
.map-link:hover { text-decoration-style:solid;}