DEV Community

echoluoluo
echoluoluo

Posted on

How to Open Latitude and Longitude in Google Maps, Apple Maps, and OpenStreetMap with JavaScript

#webdev #programming #tutorial #javascript

Latitude and longitude are useful on their own, but in many applications the next step is simple:

Open those coordinates on a map.

For example, you may have coordinates like:

40.7128, -74.0060
Enter fullscreen mode Exit fullscreen mode

and want to let a user view that location in Google Maps, Apple Maps, or OpenStreetMap.

Fortunately, you usually do not need a mapping SDK for this. A simple URL is enough.

In this article, we'll look at several practical ways to open GPS coordinates from JavaScript.

1. Starting with Latitude and Longitude

Suppose we already have a pair of coordinates:

const latitude = 40.7128;
const longitude = -74.0060;
Enter fullscreen mode Exit fullscreen mode

These coordinates point to New York City.

If you want to test coordinates manually before using them in code, a coordinate finder such as:

https://www.coordmap.com/longitude-latitude-finder

can be useful for checking latitude and longitude directly on a map.

2. Open Coordinates in Google Maps

Google Maps supports coordinate-based URLs.

A simple URL looks like this:

https://www.google.com/maps?q=40.7128,-74.0060
Enter fullscreen mode Exit fullscreen mode

In JavaScript:

const latitude = 40.7128;
const longitude = -74.0060;

const url = `https://www.google.com/maps?q=${latitude},${longitude}`;

window.open(url, "_blank");
Enter fullscreen mode Exit fullscreen mode

This opens Google Maps centered around the specified coordinates.

You can wrap it in a reusable function:

function openGoogleMaps(latitude, longitude) {
  const url = `https://www.google.com/maps?q=${latitude},${longitude}`;
  window.open(url, "_blank");
}

openGoogleMaps(40.7128, -74.0060);
Enter fullscreen mode Exit fullscreen mode

3. Use the Google Maps Search URL Format

Google also provides a more explicit search URL format:

function openGoogleMaps(latitude, longitude) {
  const url =
    `https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`;

  window.open(url, "_blank");
}
Enter fullscreen mode Exit fullscreen mode

For example:

https://www.google.com/maps/search/?api=1&query=48.8566,2.3522
Enter fullscreen mode Exit fullscreen mode

opens the location of Paris.

This format is useful because it clearly tells Google Maps that the coordinates should be treated as a search query.

4. Open Coordinates in Apple Maps

Apple Maps also accepts latitude and longitude through its URL parameters.

Example:

const latitude = 37.7749;
const longitude = -122.4194;

const url = `https://maps.apple.com/?ll=${latitude},${longitude}`;

window.open(url, "_blank");
Enter fullscreen mode Exit fullscreen mode

This will open the coordinates around San Francisco.

You can also add a label:

function openAppleMaps(latitude, longitude, label = "Location") {
  const url =
    `https://maps.apple.com/?ll=${latitude},${longitude}&q=${encodeURIComponent(label)}`;

  window.open(url, "_blank");
}
Enter fullscreen mode Exit fullscreen mode

Example:

openAppleMaps(
  37.7749,
  -122.4194,
  "San Francisco"
);
Enter fullscreen mode Exit fullscreen mode

5. Open Coordinates in OpenStreetMap

OpenStreetMap is especially useful for open-source projects and applications that do not want to depend entirely on commercial map providers.

A typical URL looks like:

https://www.openstreetmap.org/?mlat=51.5074&mlon=-0.1278#map=14/51.5074/-0.1278
Enter fullscreen mode Exit fullscreen mode

In JavaScript:

function openOpenStreetMap(latitude, longitude, zoom = 14) {
  const url =
    `https://www.openstreetmap.org/?mlat=${latitude}` +
    `&mlon=${longitude}` +
    `#map=${zoom}/${latitude}/${longitude}`;

  window.open(url, "_blank");
}
Enter fullscreen mode Exit fullscreen mode

Example:

openOpenStreetMap(51.5074, -0.1278);
Enter fullscreen mode Exit fullscreen mode

This opens London in OpenStreetMap and places a marker around the requested coordinates.

6. Let the User Choose a Map Provider

Instead of forcing users to use one map application, you can offer several options.

HTML:

<button onclick="openMap('google')">
  Google Maps
</button>

<button onclick="openMap('apple')">
  Apple Maps
</button>

<button onclick="openMap('osm')">
  OpenStreetMap
</button>
Enter fullscreen mode Exit fullscreen mode

JavaScript:

const latitude = 35.6762;
const longitude = 139.6503;

function openMap(provider) {
  let url;

  switch (provider) {
    case "google":
      url =
        `https://www.google.com/maps/search/?api=1&query=` +
        `${latitude},${longitude}`;
      break;

    case "apple":
      url =
        `https://maps.apple.com/?ll=${latitude},${longitude}`;
      break;

    case "osm":
      url =
        `https://www.openstreetmap.org/?mlat=${latitude}` +
        `&mlon=${longitude}` +
        `#map=14/${latitude}/${longitude}`;
      break;

    default:
      return;
  }

  window.open(url, "_blank");
}
Enter fullscreen mode Exit fullscreen mode

This is a simple approach that works well for location tools, travel websites, delivery applications, GPS utilities, and address lookup tools.

7. Get the User's Current Coordinates

You can combine map URLs with the browser Geolocation API.

navigator.geolocation.getCurrentPosition(
  (position) => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;

    console.log(latitude, longitude);
  },
  (error) => {
    console.error(error);
  }
);
Enter fullscreen mode Exit fullscreen mode

Then open the user's current position in Google Maps:

navigator.geolocation.getCurrentPosition((position) => {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;

  const url =
    `https://www.google.com/maps/search/?api=1&query=` +
    `${latitude},${longitude}`;

  window.open(url, "_blank");
});
Enter fullscreen mode Exit fullscreen mode

Remember that browsers normally require the user to explicitly grant location permission.

8. A Reusable JavaScript Function

If your application supports several map providers, you can create one utility function:

function getMapUrl(provider, latitude, longitude) {
  switch (provider) {
    case "google":
      return (
        `https://www.google.com/maps/search/?api=1&query=` +
        `${latitude},${longitude}`
      );

    case "apple":
      return (
        `https://maps.apple.com/?ll=` +
        `${latitude},${longitude}`
      );

    case "osm":
      return (
        `https://www.openstreetmap.org/?mlat=${latitude}` +
        `&mlon=${longitude}` +
        `#map=14/${latitude}/${longitude}`
      );

    default:
      throw new Error("Unsupported map provider");
  }
}
Enter fullscreen mode Exit fullscreen mode

Usage:

const url = getMapUrl(
  "google",
  40.7128,
  -74.0060
);

window.open(url, "_blank");
Enter fullscreen mode Exit fullscreen mode

This keeps your location-handling code much easier to maintain.

9. Validate Coordinates Before Opening the Map

When coordinates come from user input, they should be validated.

Latitude must be between:

-90 and 90
Enter fullscreen mode Exit fullscreen mode

Longitude must be between:

-180 and 180
Enter fullscreen mode Exit fullscreen mode

A simple validation function:

function isValidCoordinate(latitude, longitude) {
  return (
    Number.isFinite(latitude) &&
    Number.isFinite(longitude) &&
    latitude >= -90 &&
    latitude <= 90 &&
    longitude >= -180 &&
    longitude <= 180
  );
}
Enter fullscreen mode Exit fullscreen mode

Example:

const latitude = 40.7128;
const longitude = -74.0060;

if (isValidCoordinate(latitude, longitude)) {
  window.open(
    `https://www.google.com/maps?q=${latitude},${longitude}`,
    "_blank"
  );
}
Enter fullscreen mode Exit fullscreen mode

This is especially important if coordinates are entered manually.

10. Testing Coordinates Visually

When developing coordinate-related features, it is often useful to verify the result visually.

For example, after calculating or receiving:

48.8566, 2.3522
Enter fullscreen mode Exit fullscreen mode

you may want to confirm whether the coordinates actually point to Paris.

Instead of writing temporary map code every time, you can paste the coordinates into a browser-based coordinate tool such as:

https://www.coordmap.com/longitude-latitude-finder

and inspect the position directly.

This is also useful when debugging:

  • GPS data
  • Geolocation API results
  • reverse geocoding
  • address lookup
  • distance calculations
  • coordinate conversions
  • location databases

Conclusion

Opening latitude and longitude in a map application is surprisingly simple.

For many projects, you do not need a complete maps SDK.

You can generate a URL such as:

https://www.google.com/maps?q=LATITUDE,LONGITUDE
Enter fullscreen mode Exit fullscreen mode

and let the map provider handle the rest.

Google Maps, Apple Maps, and OpenStreetMap all support coordinate-based URLs, making this technique useful for lightweight location tools and web applications.

For developers working frequently with GPS coordinates, having both small JavaScript utilities and a visual coordinate finder can make debugging location data much easier.

Useful Links

Coordinate finder:

https://www.coordmap.com/longitude-latitude-finder

CoordMap:

https://www.coordmap.com/

Tags:

#javascript #webdev #maps #geolocation

Top comments (0)