echoluoluo

Posted on Aug 18

How to Turn Latitude and Longitude into an Address with JavaScript

#webdev #api #javascript #tutorial

Sometimes you have GPS coordinates like:

40.7128, -74.0060

But coordinates alone are not very useful to most users.

They usually want to know something much simpler:

What place is this?

The process of converting latitude and longitude into a human-readable address is called reverse geocoding.

In this article, we'll build a simple reverse geocoding example with JavaScript.

What Is Reverse Geocoding?

Normal geocoding converts an address into coordinates:

New York, NY
↓
40.7128, -74.0060

Reverse geocoding does the opposite:

40.7128, -74.0060
↓
New York, NY, United States

This is useful for location tools, GPS applications, travel websites, delivery systems, photo location tools, and map interfaces.

Reverse Geocoding with JavaScript

For a simple example, we can use the OpenStreetMap Nominatim reverse geocoding endpoint.

async function reverseGeocode(lat, lon) {
  const url =
    `https://nominatim.openstreetmap.org/reverse` +
    `?lat=${lat}&lon=${lon}&format=jsonv2`;

  const response = await fetch(url);

  if (!response.ok) {
    throw new Error("Reverse geocoding failed");
  }

  const data = await response.json();

  return data;
}

reverseGeocode(40.7128, -74.0060)
  .then(data => {
    console.log(data.display_name);
  })
  .catch(error => {
    console.error(error);
  });

The returned data usually contains a readable location name together with structured address information.

Display the Address on a Page

We can turn the example into a small browser tool.

<input id="lat" placeholder="Latitude">
<input id="lon" placeholder="Longitude">

<button onclick="findAddress()">
  Find Address
</button>

<p id="result"></p>

<script>
async function findAddress() {
  const lat = document.getElementById("lat").value;
  const lon = document.getElementById("lon").value;

  const result = document.getElementById("result");

  try {
    const url =
      `https://nominatim.openstreetmap.org/reverse` +
      `?lat=${lat}&lon=${lon}&format=jsonv2`;

    const response = await fetch(url);
    const data = await response.json();

    result.textContent =
      data.display_name || "Location not found";
  } catch (error) {
    result.textContent = "Unable to find this location";
  }
}
</script>

Now a user can paste coordinates and immediately see the corresponding place.

Coordinates from a Map Click

A more natural interface is to let users click directly on a map.

A typical map application can capture the clicked coordinate:

map.on("click", async (event) => {
  const latitude = event.lngLat.lat;
  const longitude = event.lngLat.lng;

  const location = await reverseGeocode(
    latitude,
    longitude
  );

  console.log(location.display_name);
});

This creates a useful interaction:

Click map
   ↓
Get latitude / longitude
   ↓
Reverse geocode coordinates
   ↓
Display the address

For many users, this is easier than manually entering GPS coordinates.

A Quick Way to Test Coordinates

If you only need to check a coordinate occasionally, building an application may be unnecessary.

You can use a browser-based coordinate lookup tool such as:

CoordMap Geocoding Tool

It lets you search locations, enter coordinates, or click directly on a map to inspect a position.

This can also be useful when debugging a geocoding application because you can compare your application's output with the location shown on the map.

Reverse Geocoding Is Not Always Exact

One important thing to remember is that reverse geocoding does not magically know the exact address of every coordinate.

A geocoder normally searches its geographic database for the most appropriate nearby mapped object.

That means a coordinate near a road, building boundary, park, or rural area may return a nearby address rather than an exact street address.

So your application should treat reverse-geocoded addresses as location information rather than guaranteed survey-level data.

Latitude and Longitude Order Matters

Another common source of bugs is mixing up latitude and longitude.

For example:

Latitude:  40.7128
Longitude: -74.0060

Some APIs and GIS formats use:

latitude, longitude

while others use:

longitude, latitude

Always check the format expected by the API or mapping library you are using.

A coordinate with the values reversed may point to a completely different part of the world—or may not be valid at all.

Final Thoughts

Reverse geocoding is a small feature, but it makes geographic coordinates much more understandable.

Instead of showing users:

40.7128, -74.0060

you can show them an actual place name or address.

From there, you can build more useful features such as interactive maps, location sharing, GPS tools, travel utilities, nearby-place searches, or location-based applications.

Sometimes the most useful mapping feature is simply answering one question:

Where is this coordinate?

Tags: #javascript #webdev #maps #geocoding

DEV Community