Html – How to open a mobile device’s map app when a user clicks on a link

htmlmobile

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?

Best Solution

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.