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?

Portfire

possible duplicate question: #4642981 or if not then some useful information – Catina

Are there any better answers to this question now that it's 2016? Please let me know if things have changed since 2012. – Pes

This one is now in 2023 apparently still the way to go (detect the device and use the corresponding scheme): https://mcmap.net/q/297553/-android-launch-google-map-via-web-url – Spencer

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.

Protolithic

This url structure is unsupported on Apple devices (at least on iOS 5.0.1), unfortunately. I think the solution will require detecting the user agent and providing an appropriate link per device. – Incurve

I can't get either of these to work now. Guess they're no longer supported in 2014. – Renfroe

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!

Hamstring

Great response! Works well for me. – Ichnite

You can also add "maps:" prefix to google URL, and the mobile device Android OR iOS will open native maps app (iOS maps, google maps or wathever), example: maps:maps.google.com/… (in this case with routes, if you're not intrested just use link from the answer) – Recurved

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)

Hacienda

Nested anchor elements are not valid HTML. – Defroster

How on Earth does this work? Is it just a huge coincidence that it opens the right app? – Prodigal

this is the best answer! very very simple! (and it just worked for me jul 2021) ... i don't think it matters that it isn't valid HTML ... one tip i'd like to add: format for "addressgoeshere" should be like this: 1+Main+Street+City+State+Zip – Edisonedit

Exactly why is double-linking like this needed? – Dilworth

The only reason this works is because the inside apple llink sends a user to google if they're not on a apple device. Only the inner link works here. – Glance

I tested this with other links. It shows the outer link on the first part of the anchor and the second one on the second part and each redirects correctly. It's only not distuingishable without hovering but no magic there, sorry. Just like @Glance and this answer https://mcmap.net/q/295568/-how-to-open-a-mobile-device-39-s-map-app-when-a-user-clicks-on-a-link say, the apple link does the 'magic' if you want - simple nice redirect, thx. – Tesler

Answer 4

Attending an old party here.. However, i am still struggling with this in 2021 :D

It appears that using the following link

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

Opens Apple maps on apple devices and google maps on non apple ones. Thanks apple!

Levorotatory

Works for me! This should be the accepted answer now. – Hyps

Works for me too! Thank you and yes, thank you Apple! – Maghutte

Answer 5

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;}

Counterintelligence

Recommend using semantic element of button or anchor instead of a span, otherwise this doesn't get communicated as an interactive element for assistive tech, keyboard navigation, and cursor pointers. – Romantic

Answer 6

In 2020 use these subdomains : https://maps.app.goo.gl/pQAhDLJDNaYQJ9Np7

You can get it from your Maps app when you share the place.

Works on browser/Android/Iphone

Mucilage

Given a latitude and longitude, how do you make the string at the end? – Purgatorial

String is generated by Maps app. For given lat/long you should zoom on your point till you don't see knowing point around otherwise it takes the closest knowing place : maps.app.goo.gl/LfxdMD4QV3DVsCzM9 vs maps.app.goo.gl/sk84dXhYbn2Gb7Ms9 *without red pin – Mucilage

lol nice choice of address – Longevous

Answer 7

This simple link is working great for me

<a href='https://www.google.com/maps/place/{{device?.gps_lat}},{{device?.gps_long}}' target="_blank">

Etzel

Answer 8

according to geo URL scehma : Use HTML a tag and href attribute with geo to open the device's native app:

 <a href="geo:37.786971,-122.399677">go here</a>

Kenishakenison

Answer 9

Yep, tags like data-type etc. did not work for me as well. I used direct link from Google (you can choose "share point" and it will give direct html which will point to the location).

It will open google maps in browser.

Jerrybuilt

Answer 10

For me, the best answer was to standardize a map tag, such as "MAP:".

Then to make an address invoke maps, preface it with MAP:.

So to tell a friend where something is, use something like: Map: 123 any street PA 98234.

Then when the address is clicked (for a phone, tapped), the default mapping app is invoked.

Added from comment:

The idea was for e-mail and texting, however if you want a code example, this works on android:

try
{
    String uri = "geo:0,0?q=" + Address;
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(uri));
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    getApplicationContext().startActivity(intent);
}
catch (SecurityException es)
{
    if (LOG) Log.e("Dbg", "Map failed", es);
}
catch (ActivityNotFoundException e)
{
    if (LOG) Log.e("Dbg", "Map failed", e);
}

Reexamine

The idea was for e-mail and texting, however if you want a code example, this works on android: try { String uri = "geo:0,0?q=" + Address; Intent intent; intent = new Intent(Intent.ACTION_VIEW, Uri.parse(uri)); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); getApplicationContext().startActivity(intent); } catch (SecurityException es) { if (LOG) Log.e("Dbg", "Map failed", es); } catch (ActivityNotFoundException e) { if (LOG) Log.e("Dbg", "Map failed", e); } – Reexamine