Google Haritalar Platformu (JavaScript) ile yakındaki bir işletme arama hizmeti oluşturun

60 dakika kaldı

Bu codelab hakkında

Son güncelleme Ara 3, 2021

Yazan: Angela Yu

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

1. Başlamadan önce

Kullanıcının coğrafi konumunu belirleyen ve yakındaki ilginç yerleri gösteren yerel bir işletme araması oluşturmak için Google Haritalar Platformu Haritalar ve Yerler API'larını nasıl kullanacağınızı öğrenin. Uygulama; coğrafi konum, Yer Ayrıntıları, Yer Fotoğrafları ve daha fazlasını entegre eder.

Ön koşullar

HTML, CSS ve JavaScript ile ilgili temel bilgiler
Faturalandırma hesabı olan bir proje (bir hesabınız yoksa sonraki adımda verilen talimatları uygulayın).
Aşağıdaki etkinleştirme adımı için Maps JavaScript API ve Places API'yi etkinleştirmeniz gerekir.
Yukarıdaki proje için bir API anahtarı.

Google Haritalar Platformu'nu kullanmaya başlayın

Google Haritalar Platformu'nu daha önce kullanmadıysanız Google Haritalar Platformu'nu Kullanmaya Başlama rehberini izleyerek veya Google Haritalar Platformu oynatma listesini izleyerek aşağıdaki adımları tamamlayın:

Faturalandırma hesabı oluşturun.
Bir proje oluşturun.
Google Haritalar Platformu API'lerini ve SDK'larını etkinleştirin (bir önceki bölümde listelenmiştir).
API anahtarı oluşturun.

Ne yaparsınız?

Google haritası görüntüleyen bir web sayfası oluşturma
Harita, kullanıcının konumuna ortalandı
Yakındaki yerleri bulun ve sonuçları tıklanabilir işaretçiler olarak görüntüleyin
Her yer hakkında daha fazla ayrıntı getir ve göster

Gerekenler

Google Chrome (önerilir), Firefox, Safari veya Internet Explorer gibi bir web tarayıcısı
En sevdiğiniz metin veya kod düzenleyici

Örnek kodu alın

Komut satırı arayüzünüzü (MacOS'te Terminal veya Windows'da Komut İstemi) açın ve şu komutu kullanarak örnek kodu indirin:

git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/

Bu işe yaramazsa aşağıdaki codelab'in tüm kodunu indirmek için aşağıdaki düğmeyi tıklayın ve ardından dosyayı açın:

Kodu indirin

Az önce klonladığınız veya indirdiğiniz dizine geçin.

cd google-maps-nearby-search-js

stepN klasörleri, bu codelab'in her adımının istenen bitiş durumunu içerir. Referans için yanınızdalar. Tüm kodlamanız work adlı dizinde çalışır.

2. Varsayılan merkezle harita oluşturma

Web sayfanızda Google haritası oluşturmanın üç adımı vardır:

HTML sayfası oluşturun
Harita ekle
API anahtarınızı yapıştırın

1. HTML sayfası oluşturun

Bu adımda oluşturulan harita aşağıdadır. Haritanın merkezi, Sidney, Avustralya'daki Sidney Opera Binası'ndadır. Kullanıcı, konumunu alma iznini reddederse harita varsayılan olarak bu konumu kullanır ve ilginç arama sonuçları sağlamaya devam eder.

Dizinleri work/ klasörünüzde değiştirin. Codelab'in geri kalanında düzenlemelerinizi work/ klasöründeki sürümde yapın.

cd work

work/ dizininde, index.html adında boş bir dosya oluşturmak için metin düzenleyicinizi kullanın.
Aşağıdaki kodu index.html etiketine kopyalayın.

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Sushi Finder</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map {
      height: 100%;
      background-color: grey;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* TODO: Step 4A1: Make a generic sidebar. */
  </style>
</head>

<body>
  <!-- TODO: Step 4A2: Add a generic sidebar -->

  <!-- Map appears here -->
  <div id="map"></div>

  <!-- TODO: Step 1B, Add a map -->
</body>

</html>

Web tarayıcınızda index.html dosyasını açın.

open index.html

2. Harita ekleme

Bu bölümde, Maps JavaScript API'yi web sayfanıza nasıl yükleyeceğiniz ve web sayfasına harita eklemek için API'yi kullanan kendi JavaScript'inizi nasıl yazacağınız gösterilmektedir.

Bu komut dosyası kodunu, map div öğesinden sonra  ve kapanış </body> etiketinden önce gördüğünüz yerde ekleyin.

step1/index.html

<!-- TODO: Step 1B, Add a map -->
<script>
    /* Note: This example requires that you consent to location sharing when
     * prompted by your browser. If you see the error "Geolocation permission
     * denied.", it means you probably did not give permission for the browser * to locate you. */

    /* TODO: Step 2, Geolocate your user
     * Replace the code from here to the END TODO comment with new code from
     * codelab instructions. */
    let pos;
    let map;
    function initMap() {
        // Set the default location and initialize all variables
        pos = {lat: -33.857, lng: 151.213};
        map = new google.maps.Map(document.getElementById('map'), {
            center: pos,
            zoom: 15
        });
    }
    /* END TODO: Step 2, Geolocate your user */
</script>

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

3. API anahtarınıza yapıştırma

 tarihinden sonraki satırda, komut dosyası kaynak URL'sindeki anahtar parametresinin değerini kopyalayıp ön koşullar sırasında oluşturduğunuz API anahtarıyla değiştirin.

step1/index.html

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Üzerinde çalıştığınız HTML dosyasını kaydedin.

Test etme

Düzenlemekte olduğunuz dosyanın tarayıcı görünümünü yeniden yükleyin. Şimdi gri dikdörtgenin önceden bulunduğu bir harita görebilirsiniz. Bunun yerine bir hata mesajı görürseniz son <script> etiketinde "YOUR_API_KEY" ifadesini kendi API anahtarınızla değiştirdiğinizden emin olun. Halihazırda API anahtarınız yoksa nasıl edineceğinizi öğrenmek için yukarıdaki bilgilere bakın.

Tam örnek kod

Bu noktaya kadar bu projenin tam kodu Github'da kullanılabilir.

3. Kullanıcınızı coğrafi olarak konumlandırın

Ardından, kullanıcının JavaScript veya API'siyle birlikte HTML5 Coğrafi Konum özelliğini kullanarak kullanıcının veya cihazın coğrafi konumunu bir Google haritasında görüntülemek istersiniz.

Mountain View, Kaliforniya'ya göz atarken coğrafi konumunuzu gösteren bir harita örneğini burada bulabilirsiniz:

Coğrafi konum nedir?

Coğrafi konum, bir kullanıcının veya bilgi işlem cihazının coğrafi konumunun çeşitli veri toplama mekanizmaları kullanılarak tanımlanmasını ifade eder. Genel olarak çoğu coğrafi konum hizmeti, bu konumu belirlemek için ağ yönlendirme adreslerini veya dahili GPS cihazlarını kullanır. Bu uygulama, kullanıcının konumunu belirlemek için web tarayıcısının W3C Coğrafi Konum standart navigator.geolocation özelliğini kullanır.

Kendiniz deneyin

TODO: Step 2, Geolocate your user ve END TODO: Step 2, Geolocate your user yorumları arasındaki kodu aşağıdaki kodla değiştirin:

step2/index.html

/* TODO: Step 2, Geolocate your user
    * Replace the code from here to the END TODO comment with this code
    * from codelab instructions. */
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
    // Initialize variables
    bounds = new google.maps.LatLngBounds();
    infoWindow = new google.maps.InfoWindow;
    currentInfoWindow = infoWindow;
    /* TODO: Step 4A3: Add a generic sidebar */

    // Try HTML5 geolocation
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
        };
        map = new google.maps.Map(document.getElementById('map'), {
        center: pos,
        zoom: 15
        });
        bounds.extend(pos);

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        infoWindow.open(map);
        map.setCenter(pos);

        /* TODO: Step 3B2, Call the Places Nearby Search */
    }, () => {
        // Browser supports geolocation, but user has denied permission
        handleLocationError(true, infoWindow);
    });
    } else {
    // Browser doesn't support geolocation
    handleLocationError(false, infoWindow);
    }
}

// Handle a geolocation error
function handleLocationError(browserHasGeolocation, infoWindow) {
    // Set default location to Sydney, Australia
    pos = {lat: -33.856, lng: 151.215};
    map = new google.maps.Map(document.getElementById('map'), {
    center: pos,
    zoom: 15
    });

    // Display an InfoWindow at the map center
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
    'Geolocation permissions denied. Using default location.' :
    'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
    currentInfoWindow = infoWindow;

    /* TODO: Step 3B3, Call the Places Nearby Search */
}
/* END TODO: Step 2, Geolocate your user */
/* TODO: Step 3B1, Call the Places Nearby Search */

Test etme

Dosyanızı kaydedin.
Sayfanızı yeniden yükleyin.

Tarayıcınız artık konumunuzu uygulamayla paylaşmak için izin istemelidir.

Hatayı kontrollü bir şekilde işleyip işlemediğini ve Sidney'in ortalarında olup olmadığını görmek için bir kez Engelle'yi tıklayın.
Yeniden yükleyin ve coğrafi konumun çalışıp çalışmadığını ve haritayı mevcut konumunuza taşıyıp taşımadığını görmek için İzin ver'i tıklayın.

Tam örnek kod

Bu noktaya kadar bu projenin tam kodu Github'da kullanılabilir.

4. Yakındaki yerleri arama

Yakındaki Arama, belirli bir alandaki yerleri anahtar kelimeye veya türe göre aramanıza olanak tanır. Yakındaki Arama, her zaman şu iki yöntemden biriyle belirtilebilecek bir konum içermelidir:

Dikdörtgen arama alanını tanımlayan bir LatLngBounds nesnesi
Çemberin ortasını LatLng nesnesi olarak belirten location özelliğinin ve metre cinsinden ölçülen yarıçapın kombinasyonu olarak tanımlanan dairesel alan

Bir Yakındaki Arama'yı, PlacesService nearbySearch() yöntemine çağrı yaparak başlatın. Bu yöntem, bir PlaceResult nesne dizisi döndürür.

A. Yerler Kitaplığı'nı yükleme

Önce Yerler Kitaplığı hizmetlerine erişmek için, libraries parametresini eklemek ve places değerini eklemek için komut dosyası kaynak URL'nizi güncelleyin.

step3/index.html

<!-- TODO: Step 3A, Load the Places Library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">

B. Yakındaki Yerler'de arama yapma istemini işleme ve işleme

Ardından, bir Yer Araması İsteği oluşturun. Gereken minimum alanlar şunlardır:

Gereken minimum alanlar şunlardır:

Dikdörtgen arama alanını tanımlayan bir google.maps.LatLngBounds nesnesi ya da location ve radius olmak üzere bounds; ilki bir google.maps.LatLng nesnesi, ikincisi ise dairenin yarıçapını temsil eden basit bir tam sayı alır. İzin verilen maksimum yarıçap 50.000 metredir. rankBy DISTANCE olarak ayarlandığında bir konum belirtmeniz gerekir ancak bir yarıçap veya sınırlar belirtemezsiniz.
Adı, türü, adresi, müşteri yorumları ve diğer üçüncü taraf içerikleri dahil ancak bunlarla sınırlı olmamak üzere, kullanılabilir tüm alanlarla eşleştirilecek bir keyword veya sonuçları belirtilen türle eşleşen yerlerle sınırlayan bir type. Yalnızca bir tür belirtilebilir (birden fazla tür sağlanırsa ilk girişi izleyen tüm türler yok sayılır). Desteklenen türler listesine bakın.

Bu codelab'de, arama için konum olarak kullanıcının geçerli konumunu kullanır ve sonuçları mesafeye göre sıralarsınız.

Aramayı çağırmak ve yanıtı işlemek için iki işlev yazmak üzere TODO: Step 3B1 özelliğine yorum ekleyin.

sushi anahtar kelimesi arama terimi olarak kullanılır, ancak bu terimi değiştirebilirsiniz. createMarkers işlevini tanımlamak için kullanılacak kod bir sonraki bölümde verilmiştir.

step3/index.html

/* TODO: Step 3B1, Call the Places Nearby Search */
// Perform a Places Nearby Search Request
function getNearbyPlaces(position) {
    let request = {
    location: position,
    rankBy: google.maps.places.RankBy.DISTANCE,
    keyword: 'sushi'
    };

    service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, nearbyCallback);
}

// Handle the results (up to 20) of the Nearby Search
function nearbyCallback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarkers(results);
    }
}

/* TODO: Step 3C, Generate markers for search results */

Bu satırı TODO: Step 3B2 yorumundaki initMap işlevinin sonuna ekleyin.

/* TODO: Step 3B2, Call the Places Nearby Search */
// Call Places Nearby Search on user's location
getNearbyPlaces(pos);

Bu satırı TODO: Step 3B3 yorumundaki handleLocationError işlevinin sonuna ekleyin.

/* TODO: Step 3B3, Call the Places Nearby Search */
// Call Places Nearby Search on the default location
getNearbyPlaces(pos);

C. Arama sonuçları için işaretçiler oluşturma

İşaretçi, haritadaki bir konumu tanımlar. Varsayılan olarak, bir işaretçi standart bir resim kullanır. İşaretçi resimlerini özelleştirme hakkında bilgi için İşaretçiler konusuna bakın.

google.maps.Marker oluşturucu, işaretçinin başlangıç özelliklerini belirterek tek bir Marker options nesnesi değişmez değeri alır.

Aşağıdaki alanlar, özellikle işaret oluştururken genellikle önemli olan alanlardır:

position (gerekli), işaretçinin ilk konumunu tanımlayan bir LatLng belirtir.
map (isteğe bağlı), işaretçinin yerleştirileceği Harita'yı belirtir. İşaretçiyi oluşturduktan sonra haritayı belirtmezseniz, işaret oluşturulur ancak haritaya eklenmez (veya haritada gösterilmez). İşaretçinin setMap() yöntemini çağırarak işaretçiyi daha sonra ekleyebilirsiniz.
Yanıtta döndürülen her yer için konumu, haritayı ve başlığı ayarlamak amacıyla, TODO: Step 3C yorumunun ardından aşağıdaki kodu ekleyin. Ortada ve tüm işaretçilerde haritada görünür olmasını sağlamak için bounds değişkeninin extend yöntemini de kullanırsınız.

step3/index.html

/* TODO: Step 3C, Generate markers for search results */
// Set markers at the location of each place result
function createMarkers(places) {
    places.forEach(place => {
    let marker = new google.maps.Marker({
        position: place.geometry.location,
        map: map,
        title: place.name
    });

    /* TODO: Step 4B: Add click listeners to the markers */

    // Adjust the map bounds to include the location of this marker
    bounds.extend(place.geometry.location);
    });
    /* Once all the markers have been placed, adjust the bounds of the map to
    * show all the markers within the visible area. */
    map.fitBounds(bounds);
}

/* TODO: Step 4C: Show place details in an info window */

Test etme

Sayfayı kaydedin ve yeniden yükleyin, ardından coğrafi konum izinleri vermek için İzin ver'i tıklayın.

Haritanın merkezi konumunun çevresinde en fazla 20 kırmızı işaretçi görürsünüz.

Sayfayı tekrar yükleyin ve bu kez coğrafi konum izinlerini engelleyin.

Hâlâ haritanızın varsayılan merkezinde sonuçlar alıyor musunuz (örnekte, varsayılan değer Sidney, Avustralya'dır)?

Tam örnek kod

Bu noktaya kadar bu projenin tam kodu Github'da kullanılabilir.

5. Yer Ayrıntılarını isteğe bağlı olarak göster

Bir yerin Yer Kimliği'ne sahip olduktan sonra (Yakındaki Arama'nın sonuçlarındaki alanlardan biri olarak gönderilir), bu yer hakkında tam adres, telefon numarası, kullanıcı puanları ve yorumları gibi ek ayrıntılar isteyebilirsiniz. Bu codelab'de, zengin Yer Ayrıntılarını görüntülemek için bir kenar çubuğu oluşturacak ve kullanıcının ayrıntıları görüntüleyebileceği yerleri seçebilmesi için işaretçileri etkileşimli hale getireceksiniz.

Yer Ayrıntıları'nı görüntülemek için bir yere ihtiyacınız vardır, burada bir kullanıcı bir işaretçiyi kaydırdığında yer ayrıntılarını kaydırmak ve görüntülemek için kullanabileceğiniz basit bir kod kenar çubuğu.

TODO: Step 4A1 yorumundan sonra style etiketine aşağıdaki kodu ekleyin:

step4/index.html

/* TODO: Step 4A1: Make a generic sidebar */
/* Styling for an info pane that slides out from the left. 
    * Hidden by default. */
#panel {
    height: 100%;
    width: null;
    background-color: white;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    transition: all .2s ease-out;
}

.open {
    width: 250px;
}

/* Styling for place details */
.hero {
    width: 100%;
    height: auto;
    max-height: 166px;
    display: block;
}

.place,
p {
    font-family: 'open sans', arial, sans-serif;
    padding-left: 18px;
    padding-right: 18px;
}

.details {
    color: darkslategrey;
}

a {
    text-decoration: none;
    color: cadetblue;
}

map bölümünden hemen önce body bölümüne ayrıntılar paneli için bir div ekleyin.

<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- The slide-out panel for showing place details -->
<div id="panel"></div>

TODO: Step 4A3 açıklamasından sonraki initMap() işlevinde infoPane değişkenini şu şekilde başlatın:

/* TODO: Step 4A3: Add a generic sidebar */
infoPane = document.getElementById('panel');

B. İşaretçilere tıklama işleyiciler ekleme

createMarkers işlevinde, oluşturduğunuz her işaretçiye bir tıklama dinleyici ekleyin.

Tıklama işleyici, bu işaretçiyle ilişkilendirilen yer hakkında ayrıntıları getirir ve ayrıntıları görüntülemek için işlevi çağırır.

Aşağıdaki kodu, kod yorumunda (TODO: Step 4B) createMarkers işlevinin içine yapıştırın.

showDetails bölümünde bir sonraki yöntem uygulanır.

step4/index.html

/* TODO: Step 4B: Add click listeners to the markers */
// Add click listener to each marker
google.maps.event.addListener(marker, 'click', () => {
    let request = {
    placeId: place.place_id,
    fields: ['name', 'formatted_address', 'geometry', 'rating',
        'website', 'photos']
    };

    /* Only fetch the details of a place when the user clicks on a marker.
    * If we fetch the details for all place results as soon as we get
    * the search response, we will hit API rate limits. */
    service.getDetails(request, (placeResult, status) => {
    showDetails(placeResult, marker, status)
    });
});

addListener isteğinde placeId özelliği ayrıntılar isteği için tek bir yer belirtir ve fields özelliği, yer hakkında döndürülmesini istediğiniz bilgilerle ilgili bir alan adları dizisidir. İsteyebileceğiniz alanların tam listesi için PlaceResult arayüzü konusuna bakın.

C. Yer ayrıntılarını bilgi penceresinde göster

Bilgi penceresi, harita üzerinde belirli bir konumun üzerindeki bir iletişim kutusunda içerik (genellikle metin veya resim) görüntüler. Bilgi penceresinde bir içerik alanı ve kalıplı bir kök var. Sapın ucu haritadaki belirli bir konuma eklenir. Bilgi pencereleri genellikle işaretçilere eklenir ancak belirli bir enlem/boylam için bilgi penceresi de ekleyebilirsiniz.

İşletmenin adını ve puanını gösteren bir InfoWindow oluşturmak ve ilgili pencereyi işaretçiye eklemek için TODO: Step 4C yorumuna aşağıdaki kodu ekleyin.

Sonraki bölümde kenar çubuğunda ayrıntıların gösterilmesi için showPanel öğesini tanımlarsınız.

step4/index.html

/* TODO: Step 4C: Show place details in an info window */
// Builds an InfoWindow to display details above the marker
function showDetails(placeResult, marker, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    let placeInfowindow = new google.maps.InfoWindow();
    placeInfowindow.setContent('<div><strong>' + placeResult.name +
        '</strong><br>' + 'Rating: ' + placeResult.rating + '</div>');
    placeInfowindow.open(marker.map, marker);
    currentInfoWindow.close();
    currentInfoWindow = placeInfowindow;
    showPanel(placeResult);
    } else {
    console.log('showDetails failed: ' + status);
    }
}

/* TODO: Step 4D: Load place details in a sidebar */

Başka bir div öğesini doldurmak için PlaceResult nesnesinde döndürülen aynı ayrıntıları kullanın. Bu örnekte, "panel" kimliğine sahip div için rastgele bir değişken adı olan infoPane makrosunu kullanın. Kullanıcı, yeni bir işaretçiyi her tıkladığında bu kod kenar çubuğu zaten açıksa, eski ayrıntıları siler, yeni ayrıntıları ekler ve kenar çubuğunu açar.

TODO: Step 4D yorumundan sonra aşağıdaki kodu ekleyin.

step4/index.html

/* TODO: Step 4D: Load place details in a sidebar */
// Displays place details in a sidebar
function showPanel(placeResult) {
    // If infoPane is already open, close it
    if (infoPane.classList.contains("open")) {
    infoPane.classList.remove("open");
    }

    // Clear the previous details
    while (infoPane.lastChild) {
    infoPane.removeChild(infoPane.lastChild);
    }

    /* TODO: Step 4E: Display a Place Photo with the Place Details */

    // Add place details with text formatting
    let name = document.createElement('h1');
    name.classList.add('place');
    name.textContent = placeResult.name;
    infoPane.appendChild(name);
    if (placeResult.rating != null) {
    let rating = document.createElement('p');
    rating.classList.add('details');
    rating.textContent = `Rating: ${placeResult.rating} \u272e`;
    infoPane.appendChild(rating);
    }
    let address = document.createElement('p');
    address.classList.add('details');
    address.textContent = placeResult.formatted_address;
    infoPane.appendChild(address);
    if (placeResult.website) {
    let websitePara = document.createElement('p');
    let websiteLink = document.createElement('a');
    let websiteUrl = document.createTextNode(placeResult.website);
    websiteLink.appendChild(websiteUrl);
    websiteLink.title = placeResult.website;
    websiteLink.href = placeResult.website;
    websitePara.appendChild(websiteLink);
    infoPane.appendChild(websitePara);
    }

    // Open the infoPane
    infoPane.classList.add("open");
}

E. Yer Ayrıntılarıyla Yer Göster

getDetails sonucu, placeId ile ilişkilendirilmiş en fazla 10 fotoğraftan oluşan bir dizi döndürür. Burada, ilk fotoğrafı kenar çubuğunda yer adının üst kısmında görürsünüz.

Fotoğrafın kenar çubuğunun üstünde görünmesini istiyorsanız bu kodu name öğesini oluşturmadan önce yerleştirin.

step4/index.html

/* TODO: Step 4E: Display a Place Photo with the Place Details */
// Add the primary photo, if there is one
if (placeResult.photos != null) {
    let firstPhoto = placeResult.photos[0];
    let photo = document.createElement('img');
    photo.classList.add('hero');
    photo.src = firstPhoto.getUrl();
    infoPane.appendChild(photo);
}

Test etme

Sayfayı kaydedip tarayıcınızda yeniden yükleyin ve coğrafi konum izinlerine izin verin.
Bir işaretçiyi tıklayarak bilgi penceresini açılır ve bilginin birkaç ayrıntıyı görüntülediğini görebilirsiniz; kenar çubuğu ise soldan kaydırarak daha fazla ayrıntı gösterir.
Yeniden yükleyip coğrafi konum izinlerini reddederseniz aramanın da çalışıp çalışmadığını test edin. Farklı bir sorgu için arama anahtar kelimenizi düzenleyin ve söz konusu arama için döndürülen sonucu inceleyin.

Tam örnek kod

Bu noktaya kadar bu projenin tam kodu Github'da kullanılabilir.

6. Tebrikler

Tebrikler! Maps JavaScript API'nin, Places Kitaplığı dahil olmak üzere birçok özelliğini kullandınız.

Ele aldığımız konular

google.maps.Map sınıfıyla harita oluşturma
Coğrafi konum için kullanıcının tarayıcısını kullanma ve sonuçları bir haritada görüntüleme
Haritanıza işaretçiler ekleme ve buradaki kullanıcı tıklama etkinliklerine yanıt verme
Kullanıcı bir işaretçiyi tıkladığında daha fazla bilgi görüntülemek için bilgi pencereleri ekleme
Yer Kitaplığı'nı yükleme ve Yakında Arama gerçekleştirme
Yer ayrıntılarını ve yer fotoğraflarını getirme ve gösterme

Daha fazla bilgi

Haritalar ile daha fazlasını yapmak için, her ikisi de kılavuzlar, eğiticiler, API referansı, daha fazla kod örneği ve destek kanalları içeren Maps JavaScript API dokümanlarını ve Yer Kitaplığı belgelerini inceleyin. Haritalar'a veri aktarma, Haritanızın Stilini Oluşturmaya Başlama ve Street View Hizmeti'ni eklemenin bazı popüler özellikleri şunlardır.

Bir sonraki codelab türünü oluşturmamızı en çok ne zaman tercih edersiniz?

Zengin Yerler bilgilerini kullanmaya ilişkin daha fazla örnekHaritalar Platformu JavaScript API'yi kullanarak daha fazla codelabAndroid için daha fazla codelabiOS için daha fazla codelabHaritalarda konuma dayalı verileri görselleştirmeHaritaların özel stiliStreetView'u kullanma

İstediğiniz codelab yukarıda listelenmiyor mu? Yeni bir sorun için istekte bulunun.

Hata bildir

Google Haritalar Platformu (JavaScript) ile yakındaki bir işletme arama hizmeti oluşturun

Bu codelab hakkında

Ön koşullar

Google Haritalar Platformu'nu kullanmaya başlayın

Ne yaparsınız?

Gerekenler

Örnek kodu alın

1. HTML sayfası oluşturun

2. Harita ekleme

3. API anahtarınıza yapıştırma

Test etme

Tam örnek kod

Coğrafi konum nedir?

Kendiniz deneyin

Test etme

Tam örnek kod

A. Yerler Kitaplığı'nı yükleme

B. Yakındaki Yerler'de arama yapma istemini işleme ve işleme

C. Arama sonuçları için işaretçiler oluşturma

Test etme

Tam örnek kod

A. Genel bir kenar çubuğu oluşturun

B. İşaretçilere tıklama işleyiciler ekleme

C. Yer ayrıntılarını bilgi penceresinde göster

D. Kenar çubuğunda yer ayrıntılarını yükleme

E. Yer Ayrıntılarıyla Yer Göster

Test etme

Tam örnek kod

Ele aldığımız konular

Daha fazla bilgi

Bir sonraki codelab türünü oluşturmamızı en çok ne zaman tercih edersiniz?