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

Solution 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.

Solution 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!

Solution 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)