Shipping / Payment Address and Location Information

Here is a code sample that shows how to collect address information and its location. This code sample uses @geoapify/geocoder-autocomplete and Reverse Geocoding API

by Geoapify

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
<script type="text/javascript" src="https://unpkg.com/@geoapify/geocoder-autocomplete@1.5.0/dist/index.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@geoapify/geocoder-autocomplete@1.5.0/styles/minimal.css">

<div id="autocomplete" class="autocomplete-container"></div>
<div id="address-map" class="map-container"></div>
<div id="messages" class="messages-container">
  <div id="info" class="message-row">Please enter your address in the input field below or click on the map to get the address.</div>
  <div id="warning-info" class="message-row warning hidden">The house number or street is missing. Drag the marker to the correct location to clarify.</div>
  <div id="accept-location" class="message-row hidden">Would you like to accept the address's new location? <button onclick="acceptLocation()">Yes</button></div>
  <div id="accept-address"  class="message-row hidden">You are located at the following address: <span id="new-address"></span> <br/> Do you want to accept this address? <button onclick="acceptAddress()">Yes</button></div>
</div>

CSS

.autocomplete-container {
    position: relative;
    z-index: 1000;
}

.map-container {
  margin-top: 5px;
  height: 250px;
}

.message-row {
  margin: 10px 0;
}

.message-row.warning {
  color: #f28e00;
}

.hidden {
  display: none;
}

JavaScript

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

// Create a Leaflet map
const map = L.map('address-map').setView([50, 10], 5);

// 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);


const autocompleteInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("autocomplete"),
  myAPIKey, {
    lang: 'en',
    allowNonVerifiedHouseNumber: true,
    allowNonVerifiedStreet: true,
    skipDetails: true
  });

let selectedLocation;
let locationNeedToBeClarified;
let suggestedLocation;
let locationMarker;

autocompleteInput.on('select', (location) => {
  selectLocation(location);
});


map.on('click', (event) => {
  if (!selectedLocation || locationNeedToBeClarified) {
    getAddressByLatLon(event.latlng.lat, event.latlng.lng).then(location => {
      if (selectedLocation) {
        if (locationMarker) {
          locationMarker.setLatLng(event.latlng);
        }
        suggestedLocation = location;
     ...