Create a link that opens the appropriate map app on any device, with directions to destination

javascript

prompt-engineering

geolocation-api

device-detection

byAlex Kataev·Feb 3, 2025

Utilize the universal map link, https://www.google.com/maps/?daddr=lat,long, to kickstart navigation in the user's default map app. All it takes is this line of HTML:

<a href="https://www.google.com/maps/?daddr=37.4220,-122.0841">Navigate to Destination</a>

Just replace 37.4220,-122.0841 with your specific latitude and longitude. When clicked, this link will direct the user to your chosen destination on various devices.

Distinguishing devices with JavaScript

For smooth user experience, we can use a dash of JavaScript to detect the user's device type and open the suitable map app:

function openMapApp(destination) {
  // Example coordinates here, replace with your 'latitude,longitude'
  var latLong = "37.4220,-122.0841"; // ICU, Googleplex! We're navigating to you! 
  var iosMapUrl = "http://maps.apple.com/?daddr=" + latLong;
  var androidMapUrl = "http://maps.google.com/?daddr=" + latLong;
  var universalLink = "https://www.google.com/maps/?daddr=" + latLong; // Your friendly neighborhood fallback

  // Time to play "guess the device"
  if (/(iPhone|iPad|iPod)/.test(navigator.platform)) {
    window.open(iosMapUrl); // Mortal kombat voice: "Apple wins!"
  } else if (/android/i.test(navigator.userAgent)) {
    window.open(androidMapUrl); // Androids, roll out!
  } else {
    window.open(universalLink); // For the "Others"
  }
}

// Pair with: 
// <button onclick="openMapApp('37.4220,-122.0841')">Navigate to Googleplex</button>

Customization via travel mode parameters

If you'd like to give more precise guidance, consider specifying a travel mode by appending parameters:

&mode=d for driving
&mode=b for biking
&mode=w for walking
&mode=r for public transportation

Your enhanced URL would then look like:

<a href="https://www.google.com/maps/?daddr=37.4220,-122.0841&mode=d">Drive to Googleplex</a>

Time to burn some gas (or electricity if you're eco-friendly)!

Key tips for device compatibility and geolocation

To take it up a notch, why not use the HTML5 Geolocation API to embrace the user's current position? This offers a means to derive dynamic destination coding:

function getLocationAndNavigate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var userLatitude = position.coords.latitude; // Gotcha, latitude!
      var userLongitude = position.coords.longitude; // Longitude, check!
      var destinationLink = "https://www.google.com/maps/?saddr=" + userLatitude + "," + userLongitude + "&daddr=destination";

      // Fill in the device platform option & open the apt map link
      // Refer 'Distinguishing devices with JavaScript' section for implementation
    });
  } else {
    alert("No love for Geolocation from this browser. Bummer."); // Sad times!
  }
}

// On HTML: 
// <button onclick="getLocationAndNavigate()">Find the best route from my location</button>

For more robust map functionalities like wider compatibility and advanced features, take a look at third-party libraries like Leaflet or Mapbox.

Handling fallbacks and errors

Certain things can go south with device platform detection. Always:

Have a universal link on standby as a fallback
Use try...catch to catch any unexpected scenarios
Alert the user if their device is a no-no

Sprinkle in some humor with your error handling:

try {
  openMapApp('37.4220,-122.0841');
} catch (e) {
  alert('Oops! Couldn't open the map app. Maybe it went on vacation?'); // Map app said "not today!"
}