Cross-Platform Links
Map App Directions
Device Compatibility
Navigation Tools
Destination Mapping

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

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

A directions link should work across iOS, Android, and desktop without forcing users into one map app. The most reliable baseline is a universal web URL that every browser can open, with optional platform-specific deep links for better native experience. A good implementation also handles encoding, fallback behavior, and privacy concerns.

Start with a Universal Directions URL

Use a web directions URL as your default because it works almost everywhere.

text
https://www.google.com/maps/dir/?api=1&destination=43.6532,-79.3832

This opens in browser by default and may hand off to installed map apps depending on device settings.

Build URLs Safely with Parameter Encoding

Never concatenate raw destination strings directly. Use proper query encoding.

javascript
1function buildDirectionsUrl(destination, travelMode = "driving", origin = null) {
2  const params = new URLSearchParams({
3    api: "1",
4    destination,
5    travelmode: travelMode,
6  });
7
8  if (origin) {
9    params.set("origin", origin);
10  }
11
12  return `https://www.google.com/maps/dir/?${params.toString()}`;
13}
14
15console.log(buildDirectionsUrl("1600 Amphitheatre Parkway, Mountain View"));
16console.log(buildDirectionsUrl("43.6532,-79.3832", "walking", "43.7000,-79.4000"));

Using URLSearchParams avoids breakage from spaces, commas, and special characters.

For smoother UX, try platform-specific map links first and fallback to universal web URL.

javascript
1function openDirections(destination) {
2  const universal = buildDirectionsUrl(destination);
3  const ua = navigator.userAgent || "";
4
5  if (/iPhone|iPad|iPod/.test(ua)) {
6    const apple = `http://maps.apple.com/?daddr=${encodeURIComponent(destination)}`;
7    window.location.href = apple;
8    setTimeout(() => {
9      window.location.href = universal;
10    }, 1200);
11    return;
12  }
13
14  if (/Android/.test(ua)) {
15    const geo = `geo:0,0?q=${encodeURIComponent(destination)}`;
16    window.location.href = geo;
17    setTimeout(() => {
18      window.location.href = universal;
19    }, 1200);
20    return;
21  }
22
23  window.location.href = universal;
24}

Timeout fallback is important because some browsers or webviews block custom URL schemes.

Native App Example on iOS

If you control a native iOS app, use platform APIs and canOpenURL checks.

swift
1import UIKit
2
3func openMaps(destination: String) {
4    let escaped = destination.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? ""
5
6    if let appleURL = URL(string: "http://maps.apple.com/?daddr=\(escaped)"),
7       UIApplication.shared.canOpenURL(appleURL) {
8        UIApplication.shared.open(appleURL)
9        return
10    }
11
12    if let webURL = URL(string: "https://www.google.com/maps/dir/?api=1&destination=\(escaped)") {
13        UIApplication.shared.open(webURL)
14    }
15}

This gives better native behavior when available while preserving fallback compatibility.

Destination Format and Data Quality

Directions links can use:

  • Coordinates, for example 43.6532,-79.3832.
  • Full addresses.
  • Place names.

Coordinates are generally most deterministic across locales and geocoding differences. Address strings are human-friendly but can vary by region and spelling quality.

Normalize destination input before URL generation to reduce geocoding ambiguity.

Test Matrix You Should Actually Run

One-device testing is not enough for navigation links. Validate across:

  • iOS Safari with and without native map app installed.
  • Android Chrome with different default map apps.
  • Desktop browsers.
  • In-app webviews inside messaging or social apps.

Some in-app browsers block custom schemes entirely, so fallback behavior must be verified explicitly.

When links are generated server-side, centralize generation to keep behavior consistent across channels.

python
1from urllib.parse import urlencode
2
3def directions_link(destination: str, origin: str | None = None) -> str:
4    params = {"api": "1", "destination": destination}
5    if origin:
6        params["origin"] = origin
7    return "https://www.google.com/maps/dir/?" + urlencode(params)
8
9print(directions_link("43.6532,-79.3832"))

Centralized generation reduces duplicated bugs and simplifies provider format updates.

Privacy and Compliance Considerations

Route links can include sensitive origin and destination context. Do not log full coordinates casually.

Practical policy:

  • Minimize logged location detail.
  • Redact or hash sensitive route data where possible.
  • Apply retention limits to location-bearing events.
  • Document how link analytics are collected and used.

Navigation convenience should not compromise user privacy.

Common Pitfalls

  • Building links without URL encoding.
  • Using only deep links with no universal web fallback.
  • Assuming desktop browsers can handle mobile map schemes.
  • Ignoring in-app webview restrictions.
  • Logging full route data without privacy review.

Summary

  • Use universal web directions URL as baseline cross-device strategy.
  • Encode parameters properly to avoid malformed links.
  • Add deep links only with robust fallback behavior.
  • Test across mobile, desktop, and in-app browser contexts.
  • Centralize link generation for consistency.
  • Treat location data in links as sensitive and apply privacy controls.

Course illustration
Course illustration

All Rights Reserved.