Bu sayfa, Cloud Translation API ile çevrilmiştir.

Places UI Kit nedir ve ilgi çekici çözümler oluşturmak için nasıl kullanabilirsiniz?

Giriş

Google Haritalar, dünya genelinde milyonlarca kullanıcı için doğru ve güncel yer bilgileri sunan birincil kaynaktır. Google'ın dünya genelinde 250 milyondan fazla yer içeren zengin veritabanı (kullanıcı yorumları, fotoğraflar ve puanlar dahil) benzersiz bir ayrıntı düzeyi ve güven sunar. Güncel ve doğru veriler sunmak için haritada her gün 100 milyon güncelleme yapıyoruz.

Places UI Kit, kullanıma hazır ve uygun maliyetli bir bileşen kitaplığıdır. Google Haritalar'ın yerlerle ilgili kapsamlı bilgilerinden yararlanır. Bu, Google'ın güvenilir ve bilinen Yerler deneyimini, seçtiğiniz bir haritada ön uç kullanım alanlarınıza entegre etmenizi sağlar.

Bileşenler

Places UI Kit, sorunsuz bir Places deneyimi oluşturmak için bağımsız olarak veya birlikte kullanılabilecek bir dizi ayrı kullanıcı arayüzü bileşeni sunar.

Yer Ayrıntıları: Bu bileşen, bir yerle ilgili ayrıntılı bilgileri (ör. adı, adresi, telefon numarası, web sitesi, çalışma saatleri ve kullanıcı yorumları) oluşturur.
Yer Arama: Bu bileşen, yakındaki yerlerin listesini kategorilere göre veya serbest metin aramasıyla gösterir.
Temel Yer Otomatik Tamamlama: Bu bileşen, metin girişi alanı oluşturur ve girişe uyan tahmin edilen yerlerin açılır listesini gösterir.

Places UI Kit'in Temel Avantajları

Kullanım kolaylığı: Google'ın güvenilir kullanıcı deneyimini, minimum kodla uygulamalarınıza entegre edin.
Her Haritada Kullanma: İlk kez, Google dışındaki bir haritada Yerler içeriklerini kullanabilirsiniz.
Tanıdık kullanıcı arayüzü: Bileşenler, Google Haritalar deneyimiyle tutarlı bir kullanıcı arayüzü sunarak kullanıcılar için sezgisel bir deneyim sağlar.
Özelleştirme: Places UI Kit, ek ücret ödemeden kapsamlı görsel özelleştirme seçenekleri sunar. Görüntüleme öğelerini yapılandırmak için çeşitli ayarlar ve özel CSS özellikleri kullanabilirsiniz.
Uygun maliyetli: Places UI Kit, Places API'yi doğrudan kullanmaya kıyasla daha uygun maliyetli bir çözüm olabilir.

Gerçek Hayattaki Kullanım Alanları

Places UI Kit, kullanıcı deneyimini iyileştirmek için çeşitli uygulamalarda kullanılabilir.

Yerel Keşif Uygulamaları: "Yapılacak şeyler" uygulaması, yakındaki restoranların, kafelerin veya ilgi çekici yerlerin listesini göstermek için Yer Arama bileşenini kullanabilir. Kullanıcı listeden bir yer seçtiğinde, bu konum hakkında daha fazla bilgi göstermek için Yer Ayrıntıları bileşeni kullanılabilir.
Seyahat Planlama Uygulamaları: Bir seyahat uygulaması, kullanıcıların belirli bir şehirdeki otelleri veya ilgi çekici yerleri aramasına olanak tanımak için Yer Arama'yı kullanabilir. Daha sonra Yer Ayrıntıları bileşeni, planlamaya yardımcı olmak için her konumla ilgili fotoğrafları, puanları ve yorumları gösterebilir.
Emlak ve mülk arama portalları: Bir emlak uygulaması, potansiyel bir ev alıcısının veya kiracının görüntüleme planlamadan önce mahalledeki yaşam tarzına uygunluğunu anlamasına yardımcı olmak için yakındaki yerlerin farklı kategorilerini göstermek üzere bir yer arama bileşeni kullanabilir.
Mesajlaşma ve Sosyal Medya Uygulamaları: Mesajlaşma ve sosyal medya uygulamaları, kullanıcıların buluşma yerini kolayca bulmasına yardımcı olmak için yakındaki yerleri arayıp önermek üzere Yer Arama'yı kullanabilir. Kullanıcılar yer paylaştığında zengin yer bilgilerini göstermek için Yer Ayrıntıları bileşeni kullanılabilir. Kullanıcılar, önceden oluşturulmuş Google Haritalar düğmesini kullanarak Google Haritalar'da diğer konumları ve seyahat bilgilerini kolayca ve doğru bir şekilde keşfedebilir.

Özelleştirme

Places UI Kit bileşenlerinin içerik zenginliği ve stilleri, ihtiyaçlarınıza uyacak şekilde özelleştirilebilir.

Örneğin, Yer Ayrıntıları Bileşeni için CSS özellikleri gibi özel CSS özelliklerini kullanarak bileşenlerin görünümünü ve tarzını uygulamanızın tasarımına uyacak şekilde özelleştirebilirsiniz. Renkleri, yazı tiplerini ve diğer görsel öğeleri özelleştirebilirsiniz. Görsel değişiklikler yaparken ilişkilendirme şartlarına uymak önemlidir. Örneğin, bağlantılar ve yorum sayıları için kullanılan birincil rengi --gmp-mat-color-primary CSS özelliğiyle değiştirebilirsiniz.

İçeriği seçip yapılandırmak için iç içe yerleştirilmiş bir gmp-place-content-config öğesi kullanarak veya mevcut tüm içeriği göstermek için yalnızca gmp-place-all-content öğesini kullanarak gösterilen belirli yer içeriğini kontrol edebilirsiniz.

Farklı stil yapılandırmalarını görselleştirmenize yardımcı olmak için dokümanlarda bir özelleştirme aracı bulunur.

Uygulama Kılavuzu

Places UI Kit, Maps JavaScript ile Android ve iOS için Yerler SDK'sı üzerinden kullanılabilir.

Başlarken

Places UI Kit'i kullanmaya başlamak için şu adımları uygulamanız gerekir:

Google Cloud projenizi ayarlayın: Places UI Kit'i kullanmak için faturalandırma hesabı olan bir Cloud projesine ihtiyacınız vardır.
Places UI Kit'i etkinleştirin: Projeniz için Places UI Kit'i etkinleştirmeniz gerekir.
API anahtarı alma: İsteklerinizin kimliğini doğrulamak için API anahtarı gerekir.

Platforma özel daha fazla ayrıntı için JavaScript, Android ve iOS'e yönelik Yerler UI Kiti'ni kullanmaya başlama kılavuzuna göz atın.

Uygulama örneği

Dinamik JavaScript haritalarıyla Yer Arama ve Yer Ayrıntıları'nın nasıl uygulanacağına ilişkin bir örneği aşağıda bulabilirsiniz. Kullanıcılar, yakındaki yerleri serbest metne göre arayabilir. Arama sonucu listesinde bir yer tıklandığında, yer ayrıntıları bileşeni dinamik haritalarda gösterilir.

Kod snippet'leri aşağıda verilmiştir. Demoyu ve kodun tamamını bu GitHub deposunda bulabilirsiniz.

Başlamadan önce, yukarıdaki JavaScript ile ilgili Başlangıç adımlarını tamamladığınızdan emin olun.

Gerekli kitaplıkları HTML'ye yükleyin.

<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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

HTML'de bir harita kapsayıcısı, metin girişi alanı ve arama düğmesi ekleyin. Bu harita kapsayıcısı, JavaScript'te oluşturulacak dinamik haritaları barındırır. Giriş kutusu, kullanıcıların arama sorgularını yazmasına olanak tanır.

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

Yer Arama bileşenini ekleyin. Yer Arama bileşeni, yatay ve dikey düzenler sunar. Bu örnekte yatay düzeni kullanıyoruz. "Seçilebilir" özelliği, arama sonucu liste öğesinin tıklanabilir olmasını sağlar (tıklandığında gmp-select etkinliği tetiklenir).

gmp-place-search öğesine iki alt öğe ekliyoruz:

gmp-place-all-content, mevcut tüm içeriği göstermek için kullanılır.
gmp-place-text-search-request, Yer Arama öğesini yapılandırmak için kullanılır.

Bu örnekte yapılandırmayı JavaScript'te ayarlayacağız.

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

Ardından, her biri dikey ve yatay yönlendirmeyi destekleyen kompakt ve tam düzenlerde kullanılabilen Yer Ayrıntıları bileşenini ekleyin. Bu örnekte yatay kompakt düzen kullanılmaktadır. Yer Arama bileşeninde olduğu gibi, iki alt öğe ekliyoruz:

gmp-place-all-content, mevcut tüm içeriğin gösterildiğini belirtir.
gmp-place-details-place-request, yer seçmek için kullanılır.

Bu örnekte, yeri JavaScript'te ayarlayacağız.

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

JavaScript'te bu örnek için ihtiyacımız olan kitaplıkları içe aktarın. Yer Kitaplığı, JavaScript için Places UI Kit kitaplığını içe aktarır.

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

Dinamik haritalar oluşturun.

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

Yer araması başlatmak için arama düğmesine bir tıklama işleyici ekleyin. Arama sonuçları yüklendiğinde her yer için işaretçi oluşturun ve işaretçiye tıklama dinleyicisi ekleyin. Bir işaretçiyi tıkladığınızda ilgili Yer Ayrıntıları istenip görüntülenir.

Yerler bulunduğunda ve Yer Arama öğesi yüklendiğinde, Yer Arama öğesinin yerler özelliği bir sonuç dizisiyle doldurulur. Her sonuç, yer kimliğini, koordinatlarını ve görüntü alanını içeren bir yer nesnesidir. Ayrıntıları getirmek için yer kimliğini veya yer nesnesinin tamamını Yer Ayrıntıları öğesine iletin.

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

Demoyu ve bu GitHub deposundaki kodu incelemeyi unutmayın.

İçerik oluşturmanıza yardımcı olacak kaynaklar

Katkıda bulunanlar

Başlıca yazarlar:

Teresa Qin | Google Haritalar Platformu Çözüm Mühendisi

Places UI Kit nedir ve ilgi çekici çözümler oluşturmak için nasıl kullanabilirsiniz? Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.