Geocoding: Address to Latitude/Longitude

Learn how to call Geocoding API to search an address. Then, show the found address on the map.

by Geoapify

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
<div class="main">
  <div class="controls">
    <div class="address-line">
      <input id="address" type="text" placeholder="Enter address to search"><button onclick="geocodeAddress()">Geocode</button>
    </div>
    <div class="results">
          <label for="name">Name:</label>          
          <input id="name" type="text" readonly />
          <label for="house-number">House number:</label>          
          <input id="house-number" type="text" readonly />
          <label for="street">Street:</label>          
          <input id="street" type="text" readonly />
          <label for="postcode">Postcode:</label>          
          <input id="postcode" type="text" readonly />
          <label for="city">City:</label>          
          <input id="city" type="text" readonly />
          <label for="state">State:</label>          
          <input id="state" type="text" readonly />
          <label for="country">Country:</label>          
          <input id="country" type="text" readonly />
    </div>
    <div class="status">
      <span id="status">Enter address and press "Geocode" button</span>
    </div>
  </div>
  <div id="my-map"></div>
</div>

CSS

html,
body,
.main {
  width: 100%;
  height: 100%;
  margin: 0;
}

.main {
  display: flex;
  flex-direction: row;
}

.address-line {
    padding: 10px;
    display: flex;
    flex-direction: row;
    min-width: 400px;
}

#address {
  padding: 5px 10px;
  flex: 1;
  margin-right: 5px;
}

.results {
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-width: 400px;
}

.status {
    padding: 10px;
}

#my-map {
  flex: 1;
}

JavaScript

// Create a Leaflet map
const map = L.map('my-map').setView([48.1500327, 11.5753989], 10);
// Marker to save the position of found address
let marker;

// The API Key provided is restricted to JSFiddle website
// Get your own API Key on https://myprojects.geoapify.com
const myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

// Retina displays require different mat tiles quality
const isRetina = L.Browser.retina;
const baseUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}";
const retinaUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}";

// add Geoapify attribution
map.attributionControl.setPrefix('Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a>')

// Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
L.tileLayer(isRetina ? retinaUrl : baseUrl, {
  attribution: '<a href="https://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors',
  apiKey: myAPIKey,
  maxZoom: 20,
  id: 'osm-bright',
}).addTo(map);

// move zoom controls to bottom right
map.zoomControl.remove();
L.control.zoom({
  position: 'bottomright'
}).addTo(map);

function geocodeAddress() {
  const address = document.getElementById("address").value;
  if (!address || address.length < 3) {
    document.getElementById("status").textContent = "The address string is too short. Enter at least three symbols";

    return;
  }

	if (marker) {
  	marker.remove();
  }	

  const geocodingUrl = `https://api.geoapify.com/v1/geocode/search?text=${encodeURIComponent(address)}&apiKey=${myAPIKey}`;

  // call Geocoding API - https://www.geoapify.com/geocoding-api
  fetch(geocodingUrl).then(result => result.json())
    .then(featureCollection => {
      if (featureCollection.features.length === 0) {
        document.getElementById("status").textContent = "The address is not found";
        return;
...