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

Web sitenize harita ekleme (JavaScript)

1. Başlamadan Önce

Bu codelab'de, web için Google Haritalar Platformu'nu kullanmaya başlamak amacıyla ihtiyacınız olan her şeyi öğreneceksiniz. Kurulumdan Haritalar JavaScript API'sini yüklemeye, ilk haritanızı görüntülemeden, işaretçiler ve işaretçi kümelemesinden yararlanmaya, harita üzerinde çizim yapmaya ve kullanıcı etkileşimini işlemeye kadar tüm temel bilgileri öğrenirsiniz.

Derlemeniz istenen nedir?

Bu codelab'de, aşağıdakileri yapan basit bir web uygulaması derleyeceksiniz:

Maps JavaScript API'yi yükler
Avustralya, Sidney merkezli bir harita gösterir
Sidney'in popüler yerleri için özel işaretçiler gösterir
İşaretçi kümelemeyi uygular
İşaretçi tıklandığında kullanıcı etkileşimini artıran ve harita üzerinde bir daire çizen kullanıcı

Neler öğreneceksiniz?

Google Haritalar Platformu'nu kullanmaya başlama
Maps JavaScript API'yi JavaScript kodundan dinamik olarak yükleme
Harita yükleme
İşaretçileri, özel işaretçileri ve işaretçi kümelemeyi kullanma
Kullanıcı etkileşimi sağlamak için Maps JavaScript API etkinlik sistemiyle çalışma
Haritayı dinamik olarak kontrol etme
Harita üzerinde çizme

2. Ön koşullar

Bu Codelab'i tamamlamak için aşağıdaki öğeler hakkında bilgi sahibi olmanız gerekir. Google Haritalar Platformu ile çalışmaya zaten aşinaysanız Codelab'e geçin.

Gerekli Google Haritalar Platformu Ürünleri

Bu Codelab'de aşağıdaki Google Haritalar Platformu ürünlerini kullanacaksınız:

Maps JavaScript API
MarkerClustererPlus açık kaynak işaretçi kümeleme kitaplığı

Bu Codelab için Diğer Koşullar

Bu codelab'i tamamlamak için aşağıdaki hesaplara, hizmetlere ve araçlara ihtiyacınız olacaktır:

Faturalandırmanın etkin olduğu bir Google Cloud Platform hesabı
Maps JavaScript API'nin etkin olduğu bir Google Maps Platform API anahtarı
JavaScript, HTML ve CSS hakkında temel bilgi
Bilgisayarınızda Node.js yüklü
İstediğiniz bir metin düzenleyici veya IDE

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.

3. Ayarlamalarınızı Yapın

Google Haritalar Platformu'nu kurma

Henüz bir Google Cloud Platform hesabınız ve faturalandırmanın etkin olduğu bir projeniz yoksa faturalandırma hesabı ve proje oluşturmak için lütfen Google Haritalar Platformu'nu Kullanmaya Başlama kılavuzuna bakın.

Cloud Console'da proje açılır menüsünü tıklayın ve bu codelab için kullanmak istediğiniz projeyi seçin.

Google Cloud Marketplace'te bu codelab için gerekli olan Google Haritalar Platformu API'lerini ve SDK'larını etkinleştirin. Bunu yapmak için bu video veya bu dokümanlardaki adımları uygulayın.
Cloud Console'un Kimlik Bilgileri sayfasında API anahtarı oluşturun. Bu video veya bu dokümanlardaki adımları uygulayabilirsiniz. Google Haritalar Platformu'na gönderilen tüm istekler bir API anahtarı gerektirir.

Node.js kurulumu

Henüz indirmediyseniz https://nodejs.org/ adresine giderek Node.js çalışma zamanını bilgisayarınıza indirip yükleyin.

Node.js, bu codelab için bağımlılıkları yüklemeniz gereken npm paket yöneticisiyle birlikte gelir.

Proje başlangıç şablonu kurulumu

Bu codelab'e başlamadan önce başlangıç projesi şablonunu ve çözüm çözümünün tamamını indirmek için aşağıdakileri yapın:

https://github.com/googlecodelabs/maps-platform-101-js adresinden bu codelab'i kullanmak için GitHub kod deposunu indirin veya çatallayın.

Başlangıç projesi, /starter dizininde bulunur ve codelab'i tamamlamak için ihtiyacınız olan temel dosya yapısını içerir. Üzerinde çalışmanız gereken her şey /starter/src dizininde bulunur. 2. Başlangıç projesini indirdikten sonra, /starter dizininde npm install komutunu çalıştırın. Bu, package.json içinde listelenen gerekli tüm bağımlıları yükler. 3. Bağımlılarınız yüklendikten sonra dizinde npm start komutunu çalıştırın.

Başlangıç projesi, yerel olarak yazdığınız kodu derleyip çalıştıran webpack-dev-server'ı kullanmanız için ayarlandı. webpack-dev-server, kodda her değişiklik yaptığınızda uygulamanızı tarayıcıda otomatik olarak yeniden yükler.

Çalışan çözüm kodunun tamamını görmek istiyorsanız yukarıdaki kurulum adımlarını /solution dizininde tamamlayabilirsiniz.

4. Maps JavaScript API'yi Yükleme

Başlamadan önce lütfen Kurulum bölümündeki adımları uyguladığınızdan emin olun. Hepsi bitti mi? Tamam, Google Haritalar Platformu'nu kullanarak ilk web uygulamanızı oluşturma zamanı!

Google Haritalar Platformu'nu web için kullanmanın temeli Haritalar JavaScript API'sidir. Bu API; harita, işaretçiler, çizim araçları ve Yerler gibi diğer Google Haritalar Platformu hizmetleri dahil olmak üzere Google Haritalar Platformu'nun tüm özelliklerini kullanmak için bir JavaScript arayüzü sağlar.

Maps JavaScript API ile ilgili daha önce deneyiminiz varsa, HTML dosyasına script etiketi ekleyerek bu yükleme hakkında bilgi sahibi olabilirsiniz:

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

Bu, API'yi yükleme konusunda son derece geçerli bir yöntemdir ancak modern JavaScript bağımlılıkları normalde koddan dinamik olarak dahil edilir. Koddan yukarıdaki script etiketinin eşdeğerini elde etmek için @googlemaps/js-api-loader modülünü kullanırsınız. JS API Yükleme Aracı, projenin package.json dosyasının bağımlılıklarına zaten dahil edilmiştir. Bu nedenle, npm install dosyasını daha önce çalıştırdığınızda yüklenmiştir.

JS API Yükleyicisini kullanmak için aşağıdakileri yapın:

/src/app.js'yi açın. Bu codelab için tüm çalışmalarınızı bu dosya üzerinden yapacaksınız.
Loader sınıfını @googlemaps/js-api-loader'dan içe aktarın.

Aşağıdakileri app.js listesinin üst kısmına ekleyin:
```
 import { Loader } from '@googlemaps/js-api-loader';
```
Bir apiOptions nesnesi oluşturun.

Loader sınıfı, Maps JavaScript API'yi yüklemek için çeşitli seçenekler (Google Maps Platform API anahtarınız, yüklemek istediğiniz API sürümü ve yüklemek istediğiniz Maps JS API'si tarafından sağlanan diğer kitaplıklar) belirten bir JSON nesnesi gerektirir. Bu codelab'in amaçları doğrultusunda, API anahtarını yalnızca aşağıdakine ekleyerek belirtmeniz gerekir: app.js:
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
Loader örneğini oluşturun ve bunu apiOptions ile paylaşın.
```
 const loader = new Loader(apiOptions);
```
Maps JS API'yi yükleyin.

API'yi yüklemek için Loader örneğinde load() çağrısı yapın. JS API Yükleyicisi, API yüklendikten ve kullanıma hazır hale geldikten sonra çözümlenecek bir söz verir. API'yi yüklemek ve sözü vermek için aşağıdaki koçanı ekleyin:
```
 loader.load().then(() => {
   console.log('Maps JS API loaded');
 });
```

Her şey başarılı olursa tarayıcı konsolunda console.log ifadesini görmeniz gerekir:

Özetle, Maps JavaScript API'yi koddan dinamik olarak yüklediniz ve Maps JavaScript API'nin yüklenmesi bittikten sonra yürütülen geri çağırma işlevini tanımladınız.

app.js dosyanız şunun gibi görünmelidir:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.then(() => {
      console.log('Maps JS API Loaded');
    });

Maps JavaScript API yüklendiğine göre, sonraki adımda haritayı yüklersiniz.

5. Harita görüntüleme

İlk haritanızı gösterme zamanı geldi.

Maps JavaScript API'nin en yaygın olarak kullanılan kısmı, harita örnekleri oluşturup değiştirmemize olanak tanıyan sınıftır. google.maps.Map displayMap() adlı yeni bir işlev oluşturarak bu işlemin nasıl gerçekleştiğine göz atın.

Harita ayarlarınızı tanımlayın.

Maps JavaScript API, harita için çeşitli farklı ayarları destekler, ancak yalnızca ikisi gereklidir:
- center: Haritanın merkezi için enlem ve boylamı ayarlar.
- zoom: Haritanın ilk yakınlaştırma düzeyini ayarlar.
Aşağıdaki kodu kullanarak haritayı Sidney, Avustralya'da ortalayın ve şehir merkezini göstermek için tam doğru yakınlaştırma düzeyi olan 14 yakınlaştırma düzeyini verin.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
DOM'ye haritanın yerleştirildiği div öğesini alın.

Haritanın görüntülenebilmesi için Haritalar JavaScript API'sinin sayfanın neresinde görüntülenmesini istediğinizi belirtmeniz gerekir. index.html içinde göz attığınızda aşağıdakine benzer bir div zaten görünür:
```
 <div id="map"></div>
```
Haritalar JavaScript API'sine haritanın yerleştirilmesini istediğiniz yeri bildirmek için document.getElementById bağlantısını kullanarak DOM referansını alın:
```
 const mapDiv = document.getElementById('map');
```
google.maps.Map örneği oluşturun.

Maps JavaScript API'den görüntülenebilecek yeni bir harita oluşturmasını istemek için bir google.maps.Map örneği oluşturun ve mapDiv ile mapOptions değerlerini iletin. Ayrıca, bu işlevden Map örneğini döndürerek daha sonra daha fazla işlem yapabilirsiniz:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
Haritayı görüntüleyin.

Harita örneğinizi oluşturma mantığını tanımladıktan sonra, JS API taahhüt işleyicisinden displayMap() çağrısı yaparak Haritalar JavaScript API'si yüklendikten sonra çağrılması sağlanır.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });
```

Artık tarayıcınızda Sidney'in güzel bir haritasını görebilirsiniz:

Özetlemek gerekirse, bu adımda haritanın görüntüleme seçeneklerini tanımladınız, yeni bir harita örneği oluşturdunuz ve DOM'a yerleştirdiniz.

displayMap() fonksiyonunuz aşağıdaki gibi görünmelidir:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. Bulut tabanlı harita stili (İsteğe bağlı)

Bulut tabanlı harita stili kullanarak haritanızın stilini özelleştirebilirsiniz.

Harita kimliği oluşturma

İlişkilendirilmiş harita stiliyle henüz bir harita kimliği oluşturmadıysanız aşağıdaki adımları tamamlamak için Harita kimlikleri kılavuzuna bakın:

Harita kimliği oluşturun.
Bir harita kimliğini bir harita stiliyle ilişkilendirin.

Harita kimliğini uygulamanıza ekleme

Oluşturduğunuz harita kimliğini kullanmak için app.js dosyasındaki displayMap işlevini değiştirin ve harita kimliğinizi mapOptions nesnesinin mapId özelliğinde iletin.

uygulama.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Bunu tamamladıktan sonra, seçtiğiniz stili haritada göreceksiniz.

7. Haritaya işaretçi ekleme

Geliştiricilerin Maps JavaScript API ile yaptığı birçok şey var, ancak işaretçileri haritaya yerleştirmenin en popüler seçenek olduğu kesin. İşaretçiler haritada belirli noktaları göstermenize olanak tanır ve kullanıcı etkileşimini işlemek için yaygın olarak kullanılan bir kullanıcı arayüzü öğesidir. Google Haritalar'ı daha önce kullandıysanız varsayılan işaretçi hakkında bilgi sahibi olabilirsiniz. Bu işaretçi aşağıdaki gibi görünür:

Bu adımda, haritaya işaretçi yerleştirmek için google.maps.Marker adresini kullanırsınız.

İşaretçi konumlarınız için bir nesne tanımlayın.

Başlamak için, yeni bir addMarkers() işlevi oluşturun ve Sidney'deki popüler turistik yerler için aşağıdaki enlem/boylam noktalarına sahip bir locations nesnesi belirtin.

Ayrıca, Map örneğinizi işleve iletmeniz gerektiğini de unutmayın. İşaretçi örneklerinizi oluştururken bunu daha sonra kullanırsınız.

 function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }

Gösterilmesini istediğiniz her işaretçi için bir google.maps.Marker örneği oluşturun.

İşaretçilerinizi oluşturmak için aşağıdaki kodu kullanarak bir for...in döngüsü kullanarak locations nesnesini tekrarlayın. Her işaretçinin nasıl oluşturulacağıyla ilgili bir dizi seçenek hazırlayın ve ardından her konum için google.maps.Marker örneğini oluşturun.

markerOptions öğesinin icon özelliğine dikkat edin. Önceki haritadaki varsayılan harita raptiyesini hatırlıyor musunuz? Raptiyeyi istediğiniz resim olacak şekilde özelleştirebileceğinizi de biliyor muydunuz? Artık bunu yapabilirsiniz!

icon özelliği, özel işaretçi olarak kullanmak istediğiniz resim dosyasının yolunu sağlamanıza olanak tanır. Bu codelab'i proje şablonumuzu kullanarak başlattıysanız sizin için /src/images'de zaten bir resim vardır.

İşaretçi örneklerinizi bir dizide depolamanız ve daha sonra kullanılabilmesi için işlevden döndürmeniz gerektiğini de unutmayın.
```
 const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
```
İşaretçileri görüntüleyin.

Maps JavaScript API, yeni bir google.maps.Marker örneği oluşturulduğunda otomatik olarak bir işaretçi oluşturur ve görüntüler. Bu nedenle, tek yapmanız gereken JS API taahhüt işleyicinizi addMarkers() çağrısı yapmak ve Map örneğinizi geçirmek için güncellemektir:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

Artık haritada özel işaretçiler göreceksiniz:

Özetle, bu adımda bir dizi işaretçi konumu tanımladınız ve her konum için özel bir işaretçi simgesiyle google.maps.Marker örneği oluşturdunuz.

addMarkers() fonksiyonunuz aşağıdaki gibi görünmelidir:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

Bir sonraki adımda, işaretçi kümelemeyi kullanarak işaretçilerin kullanıcı deneyimini nasıl iyileştireceğinizi öğreneceksiniz.

8. İşaretçi kümelemeyi etkinleştir

Birbirine yakın konumda bulunan çok sayıda işaretçi veya işaretçi kullanırken, işaretçilerin çakıştığı veya çok kalabalık göründüğü bir sorunla karşılaşabilirsiniz. Bu durum, kötü bir kullanıcı deneyimine neden olur. Örneğin, son adımda işaretçileri oluşturduktan sonra şunu fark etmiş olabilirsiniz:

İşaretçi kümeleme burada devreye girer. İşaretçi kümeleme, yakındaki işaretçileri yakınlaştırma düzeyine göre değişen tek bir simge halinde gruplandıran yaygın olarak kullanılan bir özelliktir:

İşaretçi kümeleme algoritması, haritanın görünür alanını bir ızgaraya böler, ardından aynı hücredeki simgeleri kümeler. Neyse ki Google Haritalar Platformu ekibi sizin için her şeyi otomatik olarak yapan MarkerClustererPlus adlı faydalı, açık kaynaklı bir yardımcı kitaplık oluşturduğundan bu konuda endişelenmenize gerek yok. MarkerClustererPluson GitHub'ın kaynağını görebilirsiniz.

MarkerCluster aktarın.

Bu codelab'in şablon projesi için MarkerClustererPlus yardımcı programı kitaplığı, package.json dosyasında beyan edilen bağımlılıklara zaten dahil edilmiştir. Bu nedenle, bu codelab'in başında npm install çalıştırdığınızda kitaplığı zaten yüklediniz.

Kitaplığı içe aktarmak için aşağıdakileri app.js dosyanızın üst kısmına ekleyin:
```
 import MarkerClusterer from '@google/markerclustererplus';
```
Yeni bir MarkerClusterer örneği oluşturun.

İşaretçi kümeleri oluşturmak için iki şey yapmanız gerekir: İşaretçi kümeleriniz için kullanmak istediğiniz simgeleri sağlayın ve yeni bir MarkerClusterer örneği oluşturun.

Öncelikle, kullanmak istediğiniz simgelerin yolunu belirten bir nesne bildirin. Şablon projede, ./img/m hesabına kaydedilmiş bir resim grubu zaten var. Resim dosyası adlarının aynı ön ekle sıralı bir şekilde numaralandırıldığına dikkat edin: m1.png, m2.png, m3.png vb.

İşaretçi kümeleyicinin seçeneklerinde imagePath özelliğini ayarladığınızda yalnızca yol ve dosya ön ekini sağlarsınız, işaretçi işaretçisi de otomatik olarak bu ön ekle başlayan tüm dosyaları kullanır ve sonuna sayı ekler.

İkinci olarak, yeni bir MarkerClusterer örneği oluşturun ve bunu, işaretçi gruplarının görüntülenmesini istediğiniz Map örneği ile kümelenmesini istediğiniz bir Marker örnek dizisi iletin.
```
 function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
```
İşaretçi kümelerini görüntüleyin.

JS API taahhüt işleyicisinden clusterMarkers() numarasını arayın. İşlev çağrısında MarkerClusterer örneği oluşturulduğunda işaretçi kümeleri haritaya otomatik olarak eklenir.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });
```

Şimdi haritanızda birkaç işaretçi kümesi göreceksiniz.

Yakınlaştırma veya uzaklaştırma yaptığınızda, MarkerClustererPlus sizin için otomatik olarak kümeleri yeniden boyutlandırır ve yeniden boyutlandırır. Yakınlaştırmak ve o kümede bulunan tüm işaretçileri görmek için herhangi bir işaretçi kümesi simgesini de tıklayabilirsiniz.

Özetlemek gerekirse, bu adımda açık kaynak MarkerClustererPlus yardımcı program kitaplığını içe aktardınız ve bunu, önceki adımda oluşturduğunuz işaretçileri otomatik olarak kümeleyen bir MarkerClusterer örneği oluşturmak için kullandınız.

clusterMarkers() fonksiyonunuz aşağıdaki gibi görünmelidir:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

Ardından, kullanıcı etkileşimini nasıl yöneteceğinizi öğrenebilirsiniz.

9. Kullanıcı etkileşimi ekle

Artık Sidney'in en popüler turistik yerlerinden bazılarını görüntüleyen harika bir haritaya sahipsiniz. Bu adımda, haritanızın kullanıcı deneyimini daha da iyileştirmek için Maps JavaScript API'nin etkinlik sistemini kullanarak kullanıcı etkileşimlerinin bir miktar işlenmesini eklersiniz.

Maps JavaScript API, koddaki çeşitli kullanıcı etkileşimlerini yönetmenize olanak sağlamak için JavaScript etkinlik işleyicilerini kullanan kapsamlı bir etkinlik sistemi sağlar. Örneğin, kullanıcının haritayı tıklaması, işaretçileri işaretleme, haritayı kaydırma, yakınlaştırma ve uzaklaştırma gibi etkileşimler için kod yürütme işlemini tetiklemek üzere etkinlik işleyiciler oluşturabilirsiniz.

Bu adımda, işaretçilerinize bir tıklama dinleyici ekleyecek ve ardından kullanıcının tıkladığı harita işaretleyiciyi haritanın merkezine almak için haritayı yatay kaydırma yapacaksınız.

İşaretçileriniz için bir tıklama dinleyici ayarlayın.

Maps JavaScript API'deki etkinlik sistemini destekleyen tüm nesneler, kullanıcı etkileşimini işlemek için addListener, removeListener gibi standart bir işlev grubunu uygular.

Her işaretçiye bir tıklama etkinliği işleyici eklemek için markers dizisini yineleyin ve click etkinliği için bir işleyici eklemek üzere işaretçi örneğinde addListener çağrısı yapın:
```
 function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
```
Tıklandığında bir işaretçiye kaydırılır.

click etkinliği, kullanıcı bir işaretçiye dokunduğunda veya dokunduğunda tetiklenir ve etkinliği, tıklanan kullanıcı arayüzü öğesiyle ilgili bilgilerle birlikte JSON nesnesi olarak döndürür. Haritanın kullanıcı deneyimini iyileştirmek için click etkinliğini yönetebilir ve tıklanan işaretçinin enlem ve boylamını öğrenmek için LatLng nesnesini kullanabilirsiniz.

Bunu yaptıktan sonra, etkinlik işleyicinin geri çağırma işlevine aşağıdakileri ekleyerek haritanın tıklanan işaretçiye sorunsuz bir şekilde kaydırılması için bunu Map örneğinin yerleşik panTo() işlevine iletmeniz yeterlidir:
```
 const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
```
Tıklama işleyicilerini atayın.

JS API taahhüt işleyicisinden addPanToMarker() numaralı telefonu arayın ve kodu çalıştırıp tıklama dinleyicilerinizi atamak için haritanızı ve işaretçilerinizi iletin.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });
```

Şimdi tarayıcıya gidip işaretçilerinizi tıklayın. Bir işaretçi tıklandığında haritanın otomatik olarak yeniden kaydırıldığını görürsünüz.

Özetlemek gerekirse, bu adımda Haritalar JavaScript API'sinin etkinlik sistemini kullanarak, haritadaki tüm işaretçilere bir tıklama dinleyici atadınız, etkinleşen tıklama etkinliğinden işaretçinin enlem ve boylamını öğrendiniz ve bir işaretçi tıklandığında haritayı yeniden ortalamak için bunu kullandınız.

addPanToMarker() fonksiyonunuz aşağıdaki gibi görünmelidir:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

Yalnızca bir adım kaldı! Ardından, Maps JavaScript API'nin çizim özelliklerini kullanarak haritanın kullanıcı deneyimini daha iyi bir hale getirebilirsiniz.

10. Harita üzerinde çizin

Şu ana kadar Sidney'in popüler turist hedefleri için işaretçileri gösteren ve kullanıcı etkileşimini işleyen bir haritasını oluşturdunuz. Bu codelab'in son adımında, harita deneyiminize yararlı başka özellikler eklemek için Maps JavaScript API'nin çizim özelliklerini kullanacaksınız.

Bu haritanın Sidney şehrini keşfetmek isteyen kullanıcılar tarafından kullanılacağını varsayalım. Tıklandığında, işaretçinin çevresindeki yarıçapı görselleştirmek de kullanışlı bir özellik olabilir. Bu, kullanıcının tıklanan işaretçiye kolayca yürüme mesafesinde olan diğer hedefleri kolayca anlamasını sağlar.

Maps JavaScript API, haritada şekiller çizmek için kare, poligon, çizgi ve daire gibi bir dizi işlev içerir. Ardından, tıklandığında işaretçinin etrafında 800 metrelik (yaklaşık yarım mesafe) bir yarıçap gösterecek şekilde bir daire oluşturacaksınız.

google.maps.Circle ile bir daire çizin.

Maps JavaScript API'deki çizim işlevleri, haritada çizilen bir nesnenin nasıl göründüğüne dair çok çeşitli seçenekler sunar. Dairesel bir yarıçap oluşturmak için dairenin renk, fırça ağırlığı ve dairenin ortalanması gereken yarıçapı gibi bir seçenek grubu belirleyip yeni bir google.maps.Circle örneği oluşturarak yeni bir daire oluşturun:
```
 function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
```
Bir işaretçi tıklandığında daireyi çizin.

Kullanıcı bir işaretçiyi tıkladığında daireyi çizmek için tek yapmanız gereken, addPanToMarker() içindeki tıklama dinleyici geri çağırmasından yukarıda yazdığınız drawCircle() işlevini çağırmak ve işaretçiyi haritada ve konumdan geçirmektir.

circle.setMap(null) işlevini çağıran bir koşullu ifadenin nasıl eklendiğine dikkat edin. Bu işlem, kullanıcı başka bir işaretçiyi tıklarsa önceden oluşturulmuş daireyi haritadan kaldırır. Böylece, kullanıcı haritayı keşfederken dairelerin çevrelediği harita olmaz.

addPanToMarker() fonksiyonunuz aşağıdaki gibi görünmelidir:
```
 function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }
```

Hepsi bu kadar. Tarayıcınıza gidin ve işaretçilerden birini tıklayın. Çevresinde dairesel bir yarıçap görmeniz gerekir:

11. Tebrikler

Maps JavaScript API'yi yükleme, harita yükleme, işaretçilerle çalışma, haritayı kontrol etme ve çizim yapma ve kullanıcı etkileşimi ekleme dahil, Google Haritalar Platformu'nu kullanarak ilk web uygulamanızı başarıyla oluşturdunuz.

Tamamlanan kodu görmek için /solutions dizinindeki tamamlanmış projeye göz atın.

Sonraki adım

Bu codelab'de, Maps JavaScript API ile neler yapabileceğinize dair temel bilgileri ele aldınız. Daha sonra, aşağıdaki özelliklerden bazılarını haritaya eklemeyi deneyin:

Uydu, karma ve arazi haritalarını görüntülemek için harita türünü değiştirin.
Haritayı farklı dillerde yüklemek için yerelleştirmeyi etkinleştirin.
Yakınlaştırma ve harita kontrolleri gibi diğer kullanıcı etkileşimlerini özelleştirin.
İşaretçiler tıklandığında bilgileri görüntülemek için bilgi pencereleri ekleyin.
Maps JavaScript API'nin, Yerler, çizim ve görselleştirme gibi ek işlevleri etkinleştiren ek kitaplıklara göz atın.

Web'de Google Haritalar Platformu ile çalışmanın diğer yollarını öğrenmek için aşağıdaki bağlantılara göz atın: