Stay organized with collectionsSave and categorize content based on your preferences.
ThePlace ID Geocodersample uses thePlace
Autocomplete widgetto allow a user to search for a place. After it
retrieves the place details, the sample marks the place on the map, then reverse
geocodes the place ID to get the place's geographic coordinates. Finally, the
sample displays an info window that contains details about the place (name,
place ID, and formatted address).
// This sample requires the Places library. Include the libraries=places// parameter when you first load the API. For example:// <script// src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">functioninitMap():void{constmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{center:{lat:-33.8688,lng:151.2195},zoom:13,});constinput=document.getElementById("pac-input")asHTMLInputElement;// Specify just the place data fields that you need.constautocomplete=newgoogle.maps.places.Autocomplete(input,{fields:["place_id","geometry","name","formatted_address"],});autocomplete.bindTo("bounds",map);map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);constinfowindow=newgoogle.maps.InfoWindow();constinfowindowContent=document.getElementById("infowindow-content")asHTMLElement;infowindow.setContent(infowindowContent);constgeocoder=newgoogle.maps.Geocoder();constmarker=newgoogle.maps.Marker({map:map});marker.addListener("click",()=>{infowindow.open(map,marker);});autocomplete.addListener("place_changed",()=>{infowindow.close();constplace=autocomplete.getPlace();if(!place.place_id){return;}geocoder.geocode({placeId:place.place_id}).then(({results})=>{map.setZoom(11);map.setCenter(results[0].geometry.location);// Set the position of the marker using the place ID and location.// @ts-ignore TODO This should be in @typings/googlemaps.marker.setPlace({placeId:place.place_id,location:results[0].geometry.location,});marker.setVisible(true);infowindowContent.children["place-name"].textContent=place.name;infowindowContent.children["place-id"].textContent=place.place_id;infowindowContent.children["place-address"].textContent=results[0].formatted_address;infowindow.open(map,marker);}).catch((e)=>window.alert("Geocoder failed due to: "+e));});}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
// This sample requires the Places library. Include the libraries=places// parameter when you first load the API. For example:// <script// src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">functioninitMap(){constmap=newgoogle.maps.Map(document.getElementById("map"),{center:{lat:-33.8688,lng:151.2195},zoom:13,});constinput=document.getElementById("pac-input");// Specify just the place data fields that you need.constautocomplete=newgoogle.maps.places.Autocomplete(input,{fields:["place_id","geometry","name","formatted_address"],});autocomplete.bindTo("bounds",map);map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);constinfowindow=newgoogle.maps.InfoWindow();constinfowindowContent=document.getElementById("infowindow-content");infowindow.setContent(infowindowContent);constgeocoder=newgoogle.maps.Geocoder();constmarker=newgoogle.maps.Marker({map:map});marker.addListener("click",()=>{infowindow.open(map,marker);});autocomplete.addListener("place_changed",()=>{infowindow.close();constplace=autocomplete.getPlace();if(!place.place_id){return;}geocoder.geocode({placeId:place.place_id}).then(({results})=>{map.setZoom(11);map.setCenter(results[0].geometry.location);// Set the position of the marker using the place ID and location.// @ts-ignore TODO This should be in @typings/googlemaps.marker.setPlace({placeId:place.place_id,location:results[0].geometry.location,});marker.setVisible(true);infowindowContent.children["place-name"].textContent=place.name;infowindowContent.children["place-id"].textContent=place.place_id;infowindowContent.children["place-address"].textContent=results[0].formatted_address;infowindow.open(map,marker);}).catch((e)=>window.alert("Geocoder failed due to: "+e));});}window.initMap=initMap;
/** 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;}.controls{background-color:#fff;border-radius:2px;border:1pxsolidtransparent;box-shadow:02px6pxrgba(0,0,0,0.3);box-sizing:border-box;font-family:Roboto;font-size:15px;font-weight:300;height:29px;margin-left:17px;margin-top:10px;outline:none;padding:011px013px;text-overflow:ellipsis;width:400px;}.controls:focus{border-color:#4d90fe;}.title{font-weight:bold;}#infowindow-content{display:none;}#map#infowindow-content{display:inline;}
<html>
<head>
<title>Place ID Geocoder</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div style="display: none">
<input
id="pac-input"
class="controls"
type="text"
placeholder="Enter a location"
/>
</div>
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br />
<strong>Place ID</strong>: <span id="place-id"></span><br />
<span id="place-address"></span>
</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&libraries=places&v=weekly"
defer
></script>
</body>
</html>
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eThis sample demonstrates using the Place Autocomplete widget to search for a place and retrieve its details.\u003c/p\u003e\n"],["\u003cp\u003eIt uses the retrieved place ID to reverse geocode the location and obtain geographic coordinates.\u003c/p\u003e\n"],["\u003cp\u003eThe sample marks the selected place on a map and displays an info window with details like name, place ID, and address.\u003c/p\u003e\n"],["\u003cp\u003eThis functionality requires including the Places library when loading the Google Maps JavaScript API.\u003c/p\u003e\n"]]],["The Place ID Geocoder uses the Place Autocomplete widget to search for a location. Upon retrieval, it marks the location on a map and reverse geocodes the Place ID to its geographic coordinates. A marker is set, then a visible info window appears displaying the place's name, Place ID, and formatted address. The user can search a location, and see the information on the place, on the map.\n"],null,["The **Place ID Geocoder** sample uses the\n[Place\nAutocomplete widget](/maps/documentation/javascript/reference/places-widget#Autocomplete) to allow a user to search for a place. After it\nretrieves the place details, the sample marks the place on the map, then reverse\ngeocodes the place ID to get the place's geographic coordinates. Finally, the\nsample displays an info window that contains details about the place (name,\nplace ID, and formatted address).\n\nRead the [documentation](/maps/documentation/javascript/places#placeid). \n\nTypeScript \n\n```typescript\n// This sample requires the Places library. Include the libraries=places\n// parameter when you first load the API. For example:\n// \u003cscript\n// src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places\"\u003e\n\nfunction initMap(): void {\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n center: { lat: -33.8688, lng: 151.2195 },\n zoom: 13,\n }\n );\n\n const input = document.getElementById(\"pac-input\") as HTMLInputElement;\n\n // Specify just the place data fields that you need.\n const autocomplete = new google.maps.places.Autocomplete(input, {\n fields: [\"place_id\", \"geometry\", \"name\", \"formatted_address\"],\n });\n\n autocomplete.bindTo(\"bounds\", map);\n\n map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);\n\n const infowindow = new google.maps.InfoWindow();\n const infowindowContent = document.getElementById(\n \"infowindow-content\"\n ) as HTMLElement;\n\n infowindow.setContent(infowindowContent);\n\n const geocoder = new google.maps.Geocoder();\n\n const marker = new google.maps.Marker({ map: map });\n\n marker.addListener(\"click\", () =\u003e {\n infowindow.open(map, marker);\n });\n\n autocomplete.addListener(\"place_changed\", () =\u003e {\n infowindow.close();\n\n const place = autocomplete.getPlace();\n\n if (!place.place_id) {\n return;\n }\n\n geocoder\n .geocode({ placeId: place.place_id })\n .then(({ results }) =\u003e {\n map.setZoom(11);\n map.setCenter(results[0].geometry.location);\n\n // Set the position of the marker using the place ID and location.\n // @ts-ignore TODO This should be in @typings/googlemaps.\n marker.setPlace({\n placeId: place.place_id,\n location: results[0].geometry.location,\n });\n\n marker.setVisible(true);\n\n infowindowContent.children[\"place-name\"].textContent = place.name;\n infowindowContent.children[\"place-id\"].textContent = place.place_id;\n infowindowContent.children[\"place-address\"].textContent =\n results[0].formatted_address;\n\n infowindow.open(map, marker);\n })\n .catch((e) =\u003e window.alert(\"Geocoder failed due to: \" + e));\n });\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/places-placeid-geocoder/index.ts#L10-L90\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\n// This sample requires the Places library. Include the libraries=places\n// parameter when you first load the API. For example:\n// \u003cscript\n// src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places\"\u003e\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n center: { lat: -33.8688, lng: 151.2195 },\n zoom: 13,\n });\n const input = document.getElementById(\"pac-input\");\n // Specify just the place data fields that you need.\n const autocomplete = new google.maps.places.Autocomplete(input, {\n fields: [\"place_id\", \"geometry\", \"name\", \"formatted_address\"],\n });\n\n autocomplete.bindTo(\"bounds\", map);\n map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);\n\n const infowindow = new google.maps.InfoWindow();\n const infowindowContent = document.getElementById(\"infowindow-content\");\n\n infowindow.setContent(infowindowContent);\n\n const geocoder = new google.maps.Geocoder();\n const marker = new google.maps.Marker({ map: map });\n\n marker.addListener(\"click\", () =\u003e {\n infowindow.open(map, marker);\n });\n autocomplete.addListener(\"place_changed\", () =\u003e {\n infowindow.close();\n\n const place = autocomplete.getPlace();\n\n if (!place.place_id) {\n return;\n }\n\n geocoder\n .geocode({ placeId: place.place_id })\n .then(({ results }) =\u003e {\n map.setZoom(11);\n map.setCenter(results[0].geometry.location);\n // Set the position of the marker using the place ID and location.\n // @ts-ignore TODO This should be in @typings/googlemaps.\n marker.setPlace({\n placeId: place.place_id,\n location: results[0].geometry.location,\n });\n marker.setVisible(true);\n infowindowContent.children[\"place-name\"].textContent = place.name;\n infowindowContent.children[\"place-id\"].textContent = place.place_id;\n infowindowContent.children[\"place-address\"].textContent =\n results[0].formatted_address;\n infowindow.open(map, marker);\n })\n .catch((e) =\u003e window.alert(\"Geocoder failed due to: \" + e));\n });\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/places-placeid-geocoder/docs/index.js#L8-L68\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\nCSS \n\n```css\n/* \n * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\n#map {\n height: 100%;\n}\n\n/* \n * Optional: Makes the sample page fill the window. \n */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\n\n.controls {\n background-color: #fff;\n border-radius: 2px;\n border: 1px solid transparent;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n box-sizing: border-box;\n font-family: Roboto;\n font-size: 15px;\n font-weight: 300;\n height: 29px;\n margin-left: 17px;\n margin-top: 10px;\n outline: none;\n padding: 0 11px 0 13px;\n text-overflow: ellipsis;\n width: 400px;\n}\n\n.controls:focus {\n border-color: #4d90fe;\n}\n\n.title {\n font-weight: bold;\n}\n\n#infowindow-content {\n display: none;\n}\n\n#map #infowindow-content {\n display: inline;\n}\nhttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/places-placeid-geocoder/docs/style.css#L7-L58\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003ePlace ID Geocoder\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv style=\"display: none\"\u003e\n \u003cinput\n id=\"pac-input\"\n class=\"controls\"\n type=\"text\"\n placeholder=\"Enter a location\"\n /\u003e\n \u003c/div\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n \u003cdiv id=\"infowindow-content\"\u003e\n \u003cspan id=\"place-name\" class=\"title\"\u003e\u003c/span\u003e\u003cbr /\u003e\n \u003cstrong\u003ePlace ID\u003c/strong\u003e: \u003cspan id=\"place-id\"\u003e\u003c/span\u003e\u003cbr /\u003e\n \u003cspan id=\"place-address\"\u003e\u003c/span\u003e\n \u003c/div\u003e\n\n \u003c!-- \n The `defer` attribute causes the script to execute after the full HTML\n document has been parsed. For non-blocking uses, avoiding race conditions,\n and consistent behavior across browsers, consider loading using Promises. See\n https://developers.google.com/maps/documentation/javascript/load-maps-js-api\n for more information.\n --\u003e\n \u003cscript\n src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places&v=weekly\"\n defer\n \u003e\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/places-placeid-geocoder/docs/index.html#L8-L43\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/places-placeid-geocoder/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-places-placeid-geocoder&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nClone Sample\n\n\nGit and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. \n\n git clone -b sample-places-placeid-geocoder https://github.com/googlemaps/js-samples.git\n cd js-samples\n npm i\n npm start\n\n\nOther samples can be tried by switching to any branch beginning with `sample-`\u003cvar translate=\"no\"\u003eSAMPLE_NAME\u003c/var\u003e. \n\n git checkout sample-\u003cvar translate=\"no\"\u003e\u003cspan class=\"devsite-syntax-nx\"\u003eSAMPLE_NAME\u003c/span\u003e\u003c/var\u003e\n npm i\n npm start"]]
