Get the Address for a Place ID
Page Summary
This example demonstrates how to use the Google Maps JavaScript API's geocoding service to retrieve an address for a given Place ID.
It utilizes the
Geocoderobject to perform the geocoding request, providing the Place ID as input.Upon successful geocoding, the example updates the map's center and zoom level, adds a marker at the retrieved location, and displays the formatted address in an info window.
The example is provided in both TypeScript and JavaScript, showcasing how to implement the functionality in either language.
Users can try the sample using JSFiddle or Google Cloud Shell, and can also clone and run it locally with Git and Node.js.
This example uses geocoding to retrieve an address for a given place ID.
Read thedocumentation.
TypeScript
// Initialize the map.functioninitMap():void{constmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{zoom:8,center:{lat:40.72,lng:-73.96},});constgeocoder=newgoogle.maps.Geocoder();constinfowindow=newgoogle.maps.InfoWindow();(document.getElementById("submit")asHTMLElement).addEventListener("click",()=>{geocodePlaceId(geocoder,map,infowindow);});}// This function is called when the user clicks the UI button requesting// a geocode of a place ID.functiongeocodePlaceId(geocoder:google.maps.Geocoder,map:google.maps.Map,infowindow:google.maps.InfoWindow){constplaceId=(document.getElementById("place-id")asHTMLInputElement).value;geocoder.geocode({placeId:placeId}).then(({results})=>{if(results[0]){map.setZoom(11);map.setCenter(results[0].geometry.location);constmarker=newgoogle.maps.Marker({map,position:results[0].geometry.location,});infowindow.setContent(results[0].formatted_address);infowindow.open(map,marker);}else{window.alert("No results found");}}).catch((e)=>window.alert("Geocoder failed due to: "+e));}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
JavaScript
// Initialize the map.functioninitMap(){constmap=newgoogle.maps.Map(document.getElementById("map"),{zoom:8,center:{lat:40.72,lng:-73.96},});constgeocoder=newgoogle.maps.Geocoder();constinfowindow=newgoogle.maps.InfoWindow();document.getElementById("submit").addEventListener("click",()=>{geocodePlaceId(geocoder,map,infowindow);});}// This function is called when the user clicks the UI button requesting// a geocode of a place ID.functiongeocodePlaceId(geocoder,map,infowindow){constplaceId=document.getElementById("place-id").value;geocoder.geocode({placeId:placeId}).then(({results})=>{if(results[0]){map.setZoom(11);map.setCenter(results[0].geometry.location);constmarker=newgoogle.maps.Marker({map,position:results[0].geometry.location,});infowindow.setContent(results[0].formatted_address);infowindow.open(map,marker);}else{window.alert("No results found");}}).catch((e)=>window.alert("Geocoder failed due to: "+e));}window.initMap=initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */#map{height:100%;}/* * Optional: Makes the sample page fill the window. */html,body{height:100%;margin:0;padding:0;}#floating-panel{position:absolute;top:10px;left:25%;z-index:5;background-color:#fff;padding:5px;border:1pxsolid#999;text-align:center;font-family:"Roboto","sans-serif";line-height:30px;padding-left:10px;}#floating-panel{width:440px;}#place-id{width:250px;}
HTML
<html> <head> <title>Retrieving an Address for a Place ID</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div> <!-- Supply a default place ID for a place in Brooklyn, New York. --> <input type="text" value="ChIJd8BlQ2BZwokRAFUEcm_qrcA" /> <input type="button" value="Get Address for Place ID" /> </div> <div></div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body></html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow theseinstructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
gitclone-bsample-geocoding-place-idhttps://github.com/googlemaps/js-samples.gitcdjs-samplesnpminpmstart
Other samples can be tried by switching to any branch beginning withsample-SAMPLE_NAME.
gitcheckoutsample-SAMPLE_NAMEnpminpmstart
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-12-11 UTC.