Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Place Details

Spark icon

Page Summary

This code demonstrates the usage of the Google Maps JavaScript API's Place class to retrieve and display place details.
It fetches the place's display name, formatted address, and location using a place ID.
An advanced marker is added to the map at the place's location, displaying its name.
It utilizes asynchronous functions and the google.maps.importLibrary method to load necessary libraries.
The sample includes TypeScript and JavaScript code snippets along with HTML and CSS for displaying the map.

This example uses a place ID to create a new Place, calls Place.fetchFields requesting the displayName and formattedAddress fields, adds a marker to the map, and logs some data to the console.

Read the documentation.

[フレーム]

TypeScript

constmapElement=document.querySelector('gmp-map')!;
letinnerMap:google.maps.Map;
letinfoWindow:google.maps.InfoWindow;
asyncfunctioninit(){
const{InfoWindow}=awaitgoogle.maps.importLibrary('maps');
innerMap=mapElement.innerMap;
infoWindow=newInfoWindow();
voidgetPlaceDetails();
}
asyncfunctiongetPlaceDetails(){
const[{Place},{AdvancedMarkerElement}]=awaitPromise.all([
google.maps.importLibrary('places'),
google.maps.importLibrary('marker'),
]);
// Use place ID to create a new Place instance.
constplace=newPlace({
id:'ChIJyYB_SZVU2YARR-I1Jjf08F0',// San Diego Zoo
});
// Call fetchFields, passing the desired data fields.
awaitplace.fetchFields({
fields:[
'displayName',
'formattedAddress',
'location',
'googleMapsURI',
],
});
// Add an Advanced Marker
constmarker=newAdvancedMarkerElement({
map:innerMap,
position:place.location,
title:place.displayName,
});
// Assemble the info window content.
constcontent=document.createElement('div');
constaddress=document.createElement('div');
constplaceId=document.createElement('div');
address.textContent=place.formattedAddress||'';
placeId.textContent=place.id;
content.append(placeId,address);
if(place.googleMapsURI){
constlink=document.createElement('a');
link.href=place.googleMapsURI;
link.target='_blank';
link.textContent='View Details on Google Maps';
content.appendChild(link);
}
// Display an info window.
infoWindow.setHeaderContent(place.displayName);
infoWindow.setContent(content);
infoWindow.open({
anchor:marker,
});
}
voidinit();index.ts

JavaScript

constmapElement=document.querySelector('gmp-map');
letinnerMap;
letinfoWindow;
asyncfunctioninit(){
const{InfoWindow}=awaitgoogle.maps.importLibrary('maps');
innerMap=mapElement.innerMap;
infoWindow=newInfoWindow();
voidgetPlaceDetails();
}
asyncfunctiongetPlaceDetails(){
const[{Place},{AdvancedMarkerElement}]=awaitPromise.all([
google.maps.importLibrary('places'),
google.maps.importLibrary('marker'),
]);
// Use place ID to create a new Place instance.
constplace=newPlace({
id:'ChIJyYB_SZVU2YARR-I1Jjf08F0',// San Diego Zoo
});
// Call fetchFields, passing the desired data fields.
awaitplace.fetchFields({
fields:[
'displayName',
'formattedAddress',
'location',
'googleMapsURI',
],
});
// Add an Advanced Marker
constmarker=newAdvancedMarkerElement({
map:innerMap,
position:place.location,
title:place.displayName,
});
// Assemble the info window content.
constcontent=document.createElement('div');
constaddress=document.createElement('div');
constplaceId=document.createElement('div');
address.textContent=place.formattedAddress||'';
placeId.textContent=place.id;
content.append(placeId,address);
if(place.googleMapsURI){
constlink=document.createElement('a');
link.href=place.googleMapsURI;
link.target='_blank';
link.textContent='View Details on Google Maps';
content.appendChild(link);
}
// Display an info window.
infoWindow.setHeaderContent(place.displayName);
infoWindow.setContent(content);
infoWindow.open({
anchor:marker,
});
}
voidinit();index.js

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;
}
style.css

HTML

<html>
 <head>
 <title>Place Class</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 <script>
 // prettier-ignore
 (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: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <gmp-map center="32.7360353,-117.1509849" zoom="14" map-id="DEMO_MAP_ID"
 ><!-- Map id is required for Advanced Markers. -->
 </gmp-map>
 </body>
</html>index.html

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions 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.git
cdsamples/place-class
npmi
npmstart