Yer Ayrıntıları (Yeni)

Platform seçin: Android iOS JavaScript Web Hizmeti
Avrupa Ekonomik Alanı (AEA) geliştiricileri

Nesneyi yerleştirme

Bir yerle ilgili bilgileri içeren Place nesnesi, Metin Arama, Yakında Arama ve Yer Otomatik Tamamlama tarafından dinamik olarak döndürülür. Ayrıca, yer kimliğinden veya kaynak adından (kaynak adı, places/ ön ekiyle yer kimliğidir) Place nesnesi de oluşturabilirsiniz. Aşağıdaki snippet'te, yer kimliği kullanılarak Place nesnesi oluşturma işlemi gösterilmektedir:

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

Ayrıca, bir yer kaynağı adından Place nesnesi de oluşturabilirsiniz:

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

Daha fazla bilgi için PlaceOptions sayfasına bakın.

Alanları getirme

Mevcut bir Place nesneniz, yer kimliğiniz veya kaynak adınız varsa bu yerle ilgili ayrıntıları almak için Place.fetchFields() yöntemini kullanın. Döndürülecek yer verisi alanlarının virgülle ayrılmış bir listesini sağlayın. Alan adlarını camel case olarak belirtin. İstenen alanlarla ilgili verileri almak için döndürülen Place nesnesini kullanın.

Aşağıdaki örnekte, yeni bir Place oluşturmak için yer kimliği kullanılmakta, displayName ve formattedAddress alanları istenerek Place.fetchFields() çağrılmakta ve haritaya işaretçi eklenmektedir.

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 ve Place'nin bu işlevden önce tanımlandığını unutmayın:
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
Tam örneği inceleyin