reviews 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 (New) Stay organized with collections Save and categorize content based on your preferences.

Page Summary

You can fetch detailed information about a place using its Place ID and the Place.fetchFields() method.
Specify the desired place data fields (e.g., displayName, formattedAddress) when calling fetchFields().
Access the fetched data through the returned Place object.
Alternatively, the Place Overview component offers a pre-built UI to display place details.
Configure and embed the Place Overview component using the provided configurator for seamless integration.

Select platform: Android iOS JavaScript Web Service

European Economic Area (EEA) developers

Place object

The Place object, which contains information about a place, is dynamically returned by Text Search, Nearby Search, and Place Autocomplete. You can also create a Place object from a place ID or resource name (the resource name is the place ID prefixed with places/). The following snippet shows creating a Place object using a place ID:

// Use a place ID to create a new Place instance.
const place = new Place({
    id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
});

You can also create a Place object from a place resource name:

// Use a place resource name to create a new Place instance.
const place = new Place({
  resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo
});

For more information, see PlaceOptions.

Fetch fields

If you have an existing Place object, or a place ID or resource name, 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, and adds a marker to the map.

TypeScript

async function getPlaceDetails() {
    const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('places'),
        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,
    });
}index.ts

JavaScript

async function getPlaceDetails() {
    const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('places'),
        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,
    });
}index.js

Note that Map and Place have been declared prior to this function:

const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");

See the complete example