How To Open A Mobile Device's Map App When A User Clicks On A Link?

February 27, 2023 Post a Comment

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='_bl

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)

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

Solution 5:

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

Html5 Log