Create device-agnostic HTML links for mapping data

Posted on February 2, 2022 at 3:34 pm

We recently did a project where HTML emails were generated with a list of stops for a delivery route. During the testing phase, we found that creating map links across devices was not so simple.

Apple Maps Link

Apple’s iOS URL handler is maps: but the preferred method is to use https://maps.apple.com/ with the location data. If you use this URL instead, it will open in the Apple Maps app on iOS/macOS or redirect to Google Maps on Windows/Android.

To display a map for a specific address, you would use a link like <A href=”http://maps.apple.com/?address=1,Infinite+Loop,Cupertino,California”>Map</A>

To display a map with a given latitude and longitude, you would use a link like <A href=”http://maps.apple.com/?ll=50.894967,4.341626″>Map</A>

For more information on Apple Maps links, check out the Apple Developer Documentation.

Google Maps Link

Sometimes mobile users don’t like the Apple Maps application and would prefer to use Google Maps instead. On iOS, there is no way to set a default Maps application so the workaround is to use a universal URL, simpliar to the Apple Maps URL. If the Google Maps app is installed on iOS or Android, the link will open in the app, otherwise it will open the map in the default web brower.

To display a map for a specific address, you would use a link like <A href=”https://www.google.com/maps/search/?api=1&query=1,Infinite+Loop,Cupertino,California”>Map</A>

To display a map with a given latitude and longitude, you would use a link like <A href=”https://www.google.com/maps/search/?api=1&query=50.894967%2C4.341626″>Map</A>

For more information on Google Maps links, check out the Google Maps Platform Documentation.

Encoding

Note that all maps links should be properly URL encoded. Each mail application handles links differently and you must encode or you may face issues. If you are using Claris FileMaker Pro, a function like GetAsURLEncoded can be used to encode your link data.

Preferences are always nice

If possible, add a preference for each email recipient so that you can dynamically create the map link based on their desired map provider.

While our primary development efforts at NRG revolve around shipping and carrier APIs, we often assist other Claris developers with projects related to other APIs. Contact our sales department for more information on our custom development services.

  1. #1 by John on February 2, 2022 - 4:44 pm

    Pretty sure I recognize this scenario!

(will not be published)



%d bloggers like this: