Introducing Places UI Kit: A ready-to-use, low-cost component library that lets you bring the familiar Google Maps UI for Places to any map of your choice. Try it out, andshare your input to help shape the future of GMP!
Place Autocomplete Element
This example adds an Autocomplete widget to a web page, and displays the resultsfor each selected place.
Read thedocumentation.
TypeScript
asyncfunctioninitMap():Promise<void>{// Request needed libraries.awaitgoogle.maps.importLibrary("places")asgoogle.maps.PlacesLibrary;// Create the input HTML element, and append it.//@ts-ignoreconstplaceAutocomplete=newgoogle.maps.places.PlaceAutocompleteElement();//@ts-ignoredocument.body.appendChild(placeAutocomplete);// Inject HTML UI.constselectedPlaceTitle=document.createElement('p');selectedPlaceTitle.textContent='';document.body.appendChild(selectedPlaceTitle);constselectedPlaceInfo=document.createElement('pre');selectedPlaceInfo.textContent='';document.body.appendChild(selectedPlaceInfo);// Add the gmp-placeselect listener, and display the results.//@ts-ignoreplaceAutocomplete.addEventListener('gmp-select',async({placePrediction})=>{constplace=placePrediction.toPlace();awaitplace.fetchFields({fields:['displayName','formattedAddress','location']});selectedPlaceTitle.textContent='Selected Place:';selectedPlaceInfo.textContent=JSON.stringify(place.toJSON(),/* replacer */null,/* space */2);});}initMap();
JavaScript
asyncfunctioninitMap(){// Request needed libraries.awaitgoogle.maps.importLibrary("places");// Create the input HTML element, and append it.//@ts-ignoreconstplaceAutocomplete=newgoogle.maps.places.PlaceAutocompleteElement();//@ts-ignoredocument.body.appendChild(placeAutocomplete);// Inject HTML UI.constselectedPlaceTitle=document.createElement('p');selectedPlaceTitle.textContent='';document.body.appendChild(selectedPlaceTitle);constselectedPlaceInfo=document.createElement('pre');selectedPlaceInfo.textContent='';document.body.appendChild(selectedPlaceInfo);// Add the gmp-placeselect listener, and display the results.//@ts-ignoreplaceAutocomplete.addEventListener('gmp-select',async({placePrediction})=>{constplace=placePrediction.toPlace();awaitplace.fetchFields({fields:['displayName','formattedAddress','location']});selectedPlaceTitle.textContent='Selected Place:';selectedPlaceInfo.textContent=JSON.stringify(place.toJSON(),/* replacer */null,/* space */2);});}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;}p{font-family:Roboto,sans-serif;font-weight:bold;}
HTML
<html> <head> <title>Place Autocomplete element</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <p>Search for a place here:</p> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</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.
gitclonehttps://github.com/googlemaps-samples/js-api-samples.gitcdsamples/place-autocomplete-elementnpminpmstart
Use the Place Overview component
The Place Overview component displays detailed information about millions of businesses, including opening hours, star reviews, and photos, plus directions and other actions in a premade UI in 5 sizes and formats. It is part of theExtended Component Library, from Google Maps Platform, a set of web components that helps developers build better maps and location features faster.
Use thePlace Overview configurator to create embeddable code for a custom Place Overview component, then export it to be used with popular frameworks like React and Angular or no framework at all.
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-07-21 UTC.