Fetch fields
If you have an existing Place
object or place ID, use the Place.fetchFields()
method to get details about that place. Provide a comma-separated list of place data fields
to return;
specify field names in camel case. Use the returned Place
object to get data for the
requested fields.
The following 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.
TypeScript
async function getPlaceDetails () { const { Place } = await google . maps . importLibrary ( "places" ) as google . maps . PlacesLibrary ; const { AdvancedMarkerElement } = await google . maps . importLibrary ( "marker" ) as google . maps . MarkerLibrary ; // Use place ID to create a new Place instance. const place = new Place ({ id : 'ChIJyYB_SZVU2YARR-I1Jjf08F0' , // San Diego Zoo }); // Call fetchFields, passing the desired data fields. await place . fetchFields ({ fields : [ 'displayName' , 'formattedAddress' , 'location' , 'googleMapsURI' ] }); // Add an Advanced Marker const marker = new AdvancedMarkerElement ({ map : innerMap , position : place.location , title : place.displayName , }); // Assemble the info window content. const content = document . createElement ( 'div' ); const address = document . createElement ( 'div' ); const placeId = document . createElement ( 'div' ); address . textContent = place . formattedAddress || '' ; placeId . textContent = place . id ; content . append ( placeId , address ); if ( place . googleMapsURI ) { const link = 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 , }); }
JavaScript
async function getPlaceDetails () { const { Place } = await google . maps . importLibrary ( "places" ); const { AdvancedMarkerElement } = await google . maps . importLibrary ( "marker" ); // Use place ID to create a new Place instance. const place = new Place ({ id : 'ChIJyYB_SZVU2YARR-I1Jjf08F0' , // San Diego Zoo }); // Call fetchFields, passing the desired data fields. await place . fetchFields ({ fields : [ 'displayName' , 'formattedAddress' , 'location' , 'googleMapsURI' ] }); // Add an Advanced Marker const marker = new AdvancedMarkerElement ({ map : innerMap , position : place . location , title : place . displayName , }); // Assemble the info window content. const content = document . createElement ( 'div' ); const address = document . createElement ( 'div' ); const placeId = document . createElement ( 'div' ); address . textContent = place . formattedAddress || '' ; placeId . textContent = place . id ; content . append ( placeId , address ); if ( place . googleMapsURI ) { const link = 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 , }); }
Map
and Place
have been declared prior to this function: const { Map } = await google . maps . importLibrary ( "maps" ); const { Place } = await google . maps . importLibrary ( "places" );
