Add Reverse Geocoding Service by Place ID on Google Maps

In this example you will learn how to add reverse geocoding service by place ID on google map.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

function geocodePlaceId(geocoder, map, infowindow) {
  var placeId = document.getElementById('place-id').value;
  geocoder.geocode({'placeId': placeId}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

Add Reverse Geocoding Service by Place ID on Google Maps Example

<!DOCTYPE html>  
<html>  
  <head> <!-- www.techstrikers.com -->  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
    <meta charset="utf-8">  
    <title>Add Reverse Geocoding by Place ID</title>  
    <style>  
      html, body {  
        height: 100%;  
        margin: 0;  
        padding: 0;  
      }  
      #map {  
        height: 99%;
        width: 99%;
      }  
#floating-panel {  
  position: absolute;  
  top: 0px;  
  left: 25%;  
  z-index: 5;  
  background-color: #fff;  
  padding: 0px;  
  border: 1px solid #999;  
  text-align: center;  
  font-family: 'Roboto','sans-serif';  
  line-height: 25px;  
  padding-left: 0px;  
}  
    </style>  
    <style>  
      #floating-panel {  
        width: 255px;  
      }  
      #place-id {  
        width: 250px;  
      }  
    </style>  
        <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"  
        async defer></script>  
        <script>  
// Initialize the map.  
function initMap() {
  var lat_lng = {lat: 22.08672, lng: 79.42444};
  var map = new google.maps.Map(document.getElementById('map'), {  
    zoom: 6,  
    center: lat_lng  
  });  
  var geocoder = new google.maps.Geocoder;  
  var infowindow = new google.maps.InfoWindow;  
  document.getElementById('submit').addEventListener('click', function() {  
    geocodePlaceId(geocoder, map, infowindow);  
  });  
}  
// This function is called when the user clicks the UI button requesting  
// a reverse geocode.  
function geocodePlaceId(geocoder, map, infowindow) {  
  var placeId = document.getElementById('place-id').value;  
  geocoder.geocode({'placeId': placeId}, function(results, status) {  
    if (status === google.maps.GeocoderStatus.OK) {  
      if (results[0]) {  
        map.setZoom(6);  
        map.setCenter(results[0].geometry.location);  
        var marker = new google.maps.Marker({  
          map: map,  
          position: results[0].geometry.location  
        });  
        infowindow.setContent(results[0].formatted_address);  
        infowindow.open(map, marker);  
      } else {  
        window.alert('No results found');  
      }  
    } else {  
      window.alert('Geocoder failed due to: ' + status);  
    }  
  });  
}  
    </script>  
  </head>  
  <body>  
    <div id="floating-panel">  
      <!-- Supply a default place ID for a place in Brooklyn, New York. -->  
      <input id="place-id" type="text" value="ChIJkbeSa_BfYzARphNChaFPjNc">  
      <input id="submit" type="button" value="Reverse Geocode by Place ID">  
    </div>  
    <div id="map"></div>  
  </body>  
</html>

See Live Example

Above example will produce following output