Javascript Reverse Geocoding API to Convert Latitude & Longitude to Real Address & Plot Google Maps

Welcome folks today in this blog post we will be using the reverse geocoding api to convert latitude and longitude to real address and plot on google maps in browser using Javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Reverse Geocoding</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 40%;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #floating-panel {
      position: absolute;
      top: 10px;
      margin-top: 200px;
      left: 25%;
      z-index: 5;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #999;
      text-align: center;
      font-family: "Roboto", "sans-serif";
      line-height: 30px;
      padding-left: 10px;
    }

    #floating-panel {
      position: absolute;
      top: 5px;
      left: 50%;
      margin-left: -180px;
      width: 350px;
      z-index: 5;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #999;
    }

    #latlng {
      width: 225px;
    }
  </style>
  <body>
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <br /><br /><br /><br />
    <br /><br /><br /><br />

    <div id="floating-panel">
      <input id="latlng" type="text" value="40.714224,-73.961452" />
      <input id="submit" type="button" value="Reverse Geocode" />
    </div>

    <div id="result"></div>

    <div id="map"></div>

    <br /><br />

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=##yourapikey##&callback=initMap&v=weekly&channel=2"
      async
    ></script>
  </body>
  <script>
    function initMap() {
      const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 8,
        center: { lat: 40.731, lng: -73.997 },
      });
      const geocoder = new google.maps.Geocoder();
      const infowindow = new google.maps.InfoWindow();

      geocodeLatLng(geocoder, map, infowindow);

      document.getElementById("submit").addEventListener("click", () => {
        geocodeLatLng(geocoder, map, infowindow);
      });
    }

    function geocodeLatLng(geocoder, map, infowindow) {
      const input = document.getElementById("latlng").value;
      const latlngStr = input.split(",", 2);
      const latlng = {
        lat: parseFloat(latlngStr[0]),
        lng: parseFloat(latlngStr[1]),
      };

      geocoder
        .geocode({ location: latlng })
        .then((response) => {
          if (response.results[0]) {
            map.setZoom(11);

            const marker = new google.maps.Marker({
              position: latlng,
              map: map,
            });

            infowindow.setContent(response.results[0].formatted_address);
            document.getElementById(
              "result"
            ).innerHTML = `<h1 style="text-align:center;">${response.results[0].formatted_address}</h1>`;
            infowindow.open(map, marker);
          } else {
            window.alert("No results found");
          }
        })
        .catch((e) => window.alert("Geocoder failed due to: " + e));
    }
  </script>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

<!DOCTYPE html>

<html>

<head>

<title>Reverse Geocoding</title>

</head>

<style>

/* Always set the map height explicitly to define the size of the div

* element that contains the map. */

#map {

height: 40%;

width: 80%;

margin-left: auto;

margin-right: auto;

}

/* Optional: Makes the sample page fill the window. */

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

#floating-panel {

position: absolute;

top: 10px;

margin-top: 200px;

left: 25%;

z-index: 5;

background-color: #fff;

padding: 5px;

border: 1px solid #999;

text-align: center;

font-family: "Roboto", "sans-serif";

line-height: 30px;

padding-left: 10px;

}

#floating-panel {

position: absolute;

top: 5px;

left: 50%;

margin-left: -180px;

width: 350px;

z-index: 5;

background-color: #fff;

padding: 5px;

border: 1px solid #999;

}

#latlng {

width: 225px;

}

</style>

<body>

</div>

<script

src="https://maps.googleapis.com/maps/api/js?key=##yourapikey##&callback=initMap&v=weekly&channel=2"

async

></script>

</body>

function initMap() {

const map = new google.maps.Map(document.getElementById("map"), {

zoom: 8,

center: { lat: 40.731, lng: -73.997 },

});

const geocoder = new google.maps.Geocoder();

const infowindow = new google.maps.InfoWindow();

geocodeLatLng(geocoder, map, infowindow);

document.getElementById("submit").addEventListener("click", () => {

geocodeLatLng(geocoder, map, infowindow);

});

}

function geocodeLatLng(geocoder, map, infowindow) {

const input = document.getElementById("latlng").value;

const latlngStr = input.split(",", 2);

const latlng = {

lat: parseFloat(latlngStr[0]),

lng: parseFloat(latlngStr[1]),

};

geocoder

.geocode({ location: latlng })

.then((response) => {

if (response.results[0]) {

map.setZoom(11);

const marker = new google.maps.Marker({

position: latlng,

map: map,

});

infowindow.setContent(response.results[0].formatted_address);

document.getElementById(

"result"

).innerHTML = `<h1 style="text-align:center;">${response.results[0].formatted_address}</h1>`;

infowindow.open(map, marker);

} else {

window.alert("No results found");

}

})

.catch((e) => window.alert("Geocoder failed due to: " + e));

}

</script>

</html>

Here in the above code you need to replace the api key from the google cloud console and then we have the input fields to allow the user to enter the latitude and longitude and we will use the reverse geocoding api of google to convert those coordinates to real addresses and plot them on google maps as shown below.

As you can see we are showing the real address inside the browser and also we are showing it inside the info window in the google maps.