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

Google Haritalar Platformu (JavaScript) ile yakındaki işletmeleri arama hizmeti oluşturma

1. Başlamadan önce

Kullanıcının coğrafi konumunu belirleyen ve yakındaki ilgi çekici yerleri gösteren bir yerel işletme araması oluşturmak için Google Maps Platform Haritalar ve Yerler API'lerini kullanmayı öğ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 hakkında temel bilgi
Faturalandırma hesabı olan bir proje (Bu hesabınız yoksa sonraki adımdaki 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 aşağıdaki adımları tamamlamak için Google Haritalar Platformu'nu Kullanmaya Başlama Kılavuzu'nu inceleyin veya Google Haritalar Platformu'nu Kullanmaya Başlama oynatma listesini izleyin:

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

Yapacaklarınız

Google Haritası gösteren bir web sayfası oluşturma
Haritayı kullanıcının konumunun ortasına getirme
Yakındaki yerleri bulma ve sonuçları tıklanabilir işaretçiler olarak gösterme
Her yer hakkında daha fazla ayrıntı getirme ve gösterme

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 alma

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

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

Bu işe yaramazsa aşağıdaki düğmeyi tıklayarak bu codelab'in tüm kodunu indirin ve dosyayı çıkarın:

Kodu indirme

Yeni kopyaladığı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 son durumunu içerir. Bunlar referans amaçlıdır. Tüm kodlama işlemlerinizi work adlı dizinde yapın.

2. Varsayılan merkeze sahip bir harita oluşturma

Web sayfanızda Google Haritası oluşturmak için üç adım vardır:

HTML sayfası oluşturma
Harita ekleme
API anahtarınızı yapıştırın

1. HTML sayfası oluşturma

Bu adımda oluşturulan harita aşağıda verilmiştir. Harita, Sidney, Avustralya'daki Sidney Opera Binası'nı merkezine alıyor. Kullanıcı, konumunu alma iznini reddederse harita varsayılan olarak bu konumu kullanır ve yine de ilgi çekici arama sonuçları sağlar.

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

cd work

work/ dizininde, metin düzenleyicinizi kullanarak index.html adlı boş bir dosya oluşturun.
Aşağıdaki kodu index.html dosyasına 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>

index.html dosyasını web tarayıcınızda 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 API'yi kullanarak web sayfasına harita ekleyen kendi JavaScript'inizi nasıl yazacağınız gösterilmektedir.

Bu komut dosyası kodunu, map div'inden sonra ve kapatma </body> etiketinden önce  gördüğünüz yere 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ızı yapıştırın

 işaretinden sonraki satırda, komut dosyası kaynak URL'sindeki anahtar parametresinin değerini, ön koşullar sırasında oluşturduğunuz API anahtarıyla kopyalayıp 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 edin

Düzenlediğiniz dosyanın tarayıcı görünümünü yeniden yükleyin. Daha önce gri dikdörtgenin bulunduğu yerde artık bir harita görmeniz gerekir. Bunun yerine bir hata mesajı görürseniz nihai <script> etiketindeki "YOUR_API_KEY" bölümünü kendi API anahtarınızla değiştirdiğinizden emin olun. Henüz bir API anahtarınız yoksa nasıl alacağınızı öğrenmek için yukarıdaki bölüme bakın.

Tam örnek kod

Bu projeyle ilgili şu ana kadarki tüm kod GitHub'da mevcuttur.

3. Kullanıcınızın coğrafi konumunu belirleme

Ardından, tarayıcınızın HTML5 Coğrafi Konum özelliği ile Maps JavaScript API'yi kullanarak kullanıcının veya cihazın coğrafi konumunu Google Haritası'nda göstermek istersiniz.

Kaliforniya, Mountain View'den göz atıyorsanız coğrafi konumunuzu gösteren bir harita örneğini aşağıda bulabilirsiniz:

Coğrafi konum nedir?

Coğrafi konum, çeşitli veri toplama mekanizmaları aracılığıyla bir kullanıcının veya bilgi işlem cihazının coğrafi konumunun belirlenmesini ifade eder. Genellikle ç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 Geolocation standardı 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 edin

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

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

Hatayı düzgün bir şekilde ele alıp Sydney'e odaklanmaya devam edip etmediğini görmek için Engelle'yi bir kez tıklayın.
Coğrafi konumun çalışıp çalışmadığını ve haritanın mevcut konumunuza taşınıp taşınmadığını görmek için sayfayı tekrar yükleyip İzin ver'i tıklayın.

Tam örnek kod

Bu projeyle ilgili şu ana kadarki tüm kod GitHub'da mevcuttur.

4. Yakındaki yerleri arama

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

Dikdörtgen arama alanını tanımlayan bir LatLngBounds nesnesi
Dairenin merkezini LatLng nesnesi olarak belirten location özelliği ile metre cinsinden ölçülen bir yarıçapın kombinasyonu olarak tanımlanan dairesel alan

PlacesService nearbySearch() yöntemini çağırarak yakındaki cihazları arama işlemi başlatın. Bu yöntem, PlaceResult nesnelerinden oluşan bir dizi döndürür.

C. Yer Kitaplığı'nı yükleme

Öncelikle Places Library hizmetlerine erişmek için komut dosyası kaynak URL'nizi güncelleyerek libraries parametresini kullanıma sunun ve değer olarak places ekleyin.

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 Arama isteğini çağırma ve yanıtı işleme

Ardından, PlaceSearch isteği oluşturun. Gerekli minimum alanlar şunlardır:

Gerekli minimum alanlar şunlardır:

bounds, dikdörtgen arama alanını tanımlayan bir google.maps.LatLngBounds nesnesi veya bir location ve bir radius olmalıdır. Birincisi bir google.maps.LatLng nesnesi, ikincisi ise dairenin yarıçapını metre cinsinden temsil eden basit bir tam sayı alır. İzin verilen maksimum yarıçap 50.000 metredir. rankBy, DISTANCE olarak ayarlandığında bir konum belirtmeniz gerektiğini ancak yarıçap veya sınırlar belirtemeyeceğinizi unutmayın.
Ad, tür ve adresin yanı sıra müşteri yorumları ve diğer üçüncü taraf içerikleri dahil ancak bunlarla sınırlı olmamak üzere tüm kullanılabilir 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şten sonraki tüm türler yoksayılır). Desteklenen türlerin listesine bakın.

Bu codelab'de, arama için kullanıcının mevcut konumunu kullanacak ve sonuçları mesafeye göre sıralayacaksınız.

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

Arama terimi olarak sushi anahtar kelimesi kullanılır ancak bunu değiştirebilirsiniz. createMarkers işlevini tanımlayan 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ı, yorum TODO: Step 3B2 bölümündeki 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ı, yorum TODO: Step 3B3 bölümündeki 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, işaretçiler standart bir resim kullanır. İşaretçi resimlerini özelleştirme hakkında bilgi için İşaretçiler başlıklı makaleyi inceleyin.

google.maps.Marker oluşturucusu, işaretçinin ilk özelliklerini belirten tek bir Marker options nesne değişmezi alır.

İşaretçi oluştururken aşağıdaki alanlar özellikle önemlidir ve yaygın olarak ayarlanır:

position (zorunlu) işaretçinin ilk konumunu tanımlayan bir LatLng belirtir.
map (isteğe bağlı) İşaretçinin yerleştirileceği haritayı belirtir. İşaretçi oluşturulurken harita belirtilmezse işaretçi oluşturulur ancak haritaya eklenmez (veya haritada gösterilmez). İşaretleyicinin setMap() yöntemini çağırarak işaretleyiciyi daha sonra ekleyebilirsiniz.
Yanıtla döndürülen her yer için bir işaretçinin konumunu, haritasını ve başlığını ayarlamak üzere TODO: Step 3C yorumundan sonra aşağıdaki kodu ekleyin. Ayrıca, merkezin ve tüm işaretçilerin haritada görünür olmasını sağlamak için extend değişkeninin bounds yöntemini 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 edin

Sayfayı kaydedip yeniden yükleyin ve coğrafi konum izni vermek için İzin ver'i tıklayın.

Haritanın merkez konumunun etrafında en fazla 20 kırmızı işaretçi görmeniz gerekir.

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

Haritanızın varsayılan merkezinde (örnekte varsayılan merkez Sidney, Avustralya'dadır) sonuç almaya devam ediyor musunuz?

Tam örnek kod

Bu projeyle ilgili şu ana kadarki tüm kod GitHub'da mevcuttur.

5. İsteğe bağlı olarak yer ayrıntılarını gösterme

Bir yerin Yer Kimliği'ni (Yakın Arama sonuçlarınızdaki alanlardan biri olarak sağlanır) aldıktan sonra yerle ilgili ek ayrıntılar (ör. tam adresi, telefon numarası, kullanıcı puanları ve yorumları) isteyebilirsiniz. Bu codelab'de, zengin yer ayrıntılarını göstermek için bir kenar çubuğu oluşturacak ve işaretçileri etkileşimli hale getireceksiniz. Böylece kullanıcılar, ayrıntılarını görüntülemek için yerleri seçebilecek.

Yer ayrıntılarını göstermek için bir yere ihtiyacınız var. Bu nedenle, kullanıcı bir işaretçiyi tıkladığında yer ayrıntılarını kaydırarak gösterip görüntülemek için kullanabileceğiniz bir kenar çubuğuyla ilgili basit bir kod paylaşıyoruz.

Aşağıdaki kodu, style etiketine TODO: Step 4A1 yorumundan sonra 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;
}

body bölümünde, map div'inden hemen önce 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>

initMap() işlevinde, TODO: Step 4A3 yorumundan sonra 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şleyicileri ekleme

createMarkers işlevinde, her işaretçiyi oluştururken tıklama işleyici ekleyin.

Tıklama işleyicisi, işaretçiyle ilişkili yer hakkında ayrıntılar getirir ve ayrıntıları göstermek için işlevi çağırır.

Aşağıdaki kodu, createMarkers işlevinin içine, kod yorumu TODO: Step 4B bölümüne yapıştırın.

showDetails yöntemi bir sonraki bölümde 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 bilgiler için bir alan adı dizisidir. İsteyebileceğiniz alanların tam listesi için PlaceResult arayüzü'ne bakın.

C. Bilgi penceresinde yer ayrıntılarını gösterme

Bilgi penceresi, haritada belirli bir konumun üzerindeki iletişim kutusunda içerik (genellikle metin veya resim) gösterir. Bilgi penceresinde bir içerik alanı ve konik bir gövde bulunur. Sapın ucu, haritada belirtilen bir konuma bağlıdır. Bilgi pencereleri genellikle işaretçilere eklenir ancak belirli bir enlem/boylama da bilgi penceresi ekleyebilirsiniz.

İşletmenin adını ve derecelendirmesini gösteren bir InfoWindow oluşturmak ve bu pencereyi işaretçiye eklemek için yorum TODO: Step 4C bölümüne aşağıdaki kodu ekleyin.

Ayrıntıları bir kenar çubuğunda göstermek için sonraki bölümde showPanel 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'i doldurmak için PlaceResult nesnesinde döndürülen ayrıntıların aynısını kullanın. Bu örnekte, kimliği "panel" olan div için rastgele bir değişken adı olan infoPane'yi kullanın. Kullanıcı her yeni işaretçiyi tıkladığında bu kod, kenar çubuğu açıksa kapatır, eski ayrıntıları siler, yeni ayrıntıları ekler ve kenar çubuğunu açar.

Aşağıdaki kodu TODO: Step 4D yorumundan sonra 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 birlikte yer fotoğrafı gösterme

getDetails sonucu, placeId ile ilişkili en fazla 10 fotoğrafın dizisini döndürür. Burada, ilk fotoğrafı kenar çubuğundaki yer adının üzerinde gösterirsiniz.

Fotoğrafın kenar çubuğunun üst kısmında görünmesini istiyorsanız bu kodu name öğesi oluşturulmadan ö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 edin

Sayfayı tarayıcınızda kaydedip yeniden yükleyin ve coğrafi konum izinlerine izin verin.
Bir işaretçiyi tıkladığınızda işaretçiden bilgi penceresi açılır. Bu pencerede birkaç ayrıntı gösterilir. Ayrıca, daha fazla ayrıntı görüntülemek için kenar çubuğu soldan kayarak açılır.
Yeniden yükleyip coğrafi konum izinlerini reddederseniz aramanın çalışıp çalışmadığını test edin. Farklı bir sorgu için arama anahtar kelimenizi düzenleyin ve bu arama için döndürülen sonucu inceleyin.

Tam örnek kod

Bu projeyle ilgili şu ana kadarki tüm kod GitHub'da mevcuttur.

6. Tebrikler

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

İşlediğimiz 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ı haritada gösterme
Haritanıza işaretçiler ekleme ve bu işaretçilerdeki kullanıcı tıklama etkinliklerine yanıt verme
Kullanıcı bir işaretçiyi tıkladığında daha fazla bilgi göstermek 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örüntüleme

Daha fazla bilgi

Haritalarla daha da fazlasını yapmak için Maps JavaScript API dokümanlarını ve Yerler Kitaplığı dokümanlarını inceleyin. Her ikisinde de kılavuzlar, eğitici içerikler, API referansı, daha fazla kod örneği ve destek kanalları yer alır. Popüler özelliklerden bazıları Haritalar'a Veri Aktarma, Haritanızı Şekillendirmeye Başlama ve Street View Hizmeti'ni eklemedir.

Bir sonraki codelab'in hangi konuda olmasını istersiniz?

Zengin yer bilgileri kullanmayla ilgili daha fazla örnek

Maps Platform JavaScript API'yi kullanan daha fazla codelab

Android için daha fazla codelab

iOS için daha fazla codelab

Konuma dayalı verileri haritalarda görselleştirme

Haritaları özel olarak stilize etme

Street View'u kullanma

İstediğiniz codelab yukarıda listelenmiyor mu? Buradan yeni bir sorunla ilgili istekte bulunun.

Google Haritalar Platformu (JavaScript) ile yakındaki işletmeleri arama hizmeti oluşturma Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. Başlamadan önce

Ön koşullar

Google Haritalar Platformu'nu kullanmaya başlayın

Yapacaklarınız

Gerekenler

Örnek kodu alma

2. Varsayılan merkeze sahip bir harita oluşturma

1. HTML sayfası oluşturma

2. Harita ekleme

3. API anahtarınızı yapıştırın

Test edin

Tam örnek kod

3. Kullanıcınızın coğrafi konumunu belirleme

Coğrafi konum nedir?

Kendiniz deneyin

Test edin

Tam örnek kod

4. Yakındaki yerleri arama

C. Yer Kitaplığı'nı yükleme

B. Yakındaki Yerler Arama isteğini çağırma ve yanıtı işleme

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

Test edin

Tam örnek kod

5. İsteğe bağlı olarak yer ayrıntılarını gösterme

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

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

C. Bilgi penceresinde yer ayrıntılarını gösterme

D. Yer ayrıntılarını yan çubuğa yükleme

E. Yer ayrıntılarıyla birlikte yer fotoğrafı gösterme

Test edin

Tam örnek kod

6. Tebrikler

İşlediğimiz konular

Daha fazla bilgi

Bir sonraki codelab'in hangi konuda olmasını istersiniz?

Google Haritalar Platformu (JavaScript) ile yakındaki işletmeleri arama hizmeti oluşturma