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 üzere bilmeniz gereken her şeyi öğreneceksiniz. Kurulumdan Maps JavaScript API'yi yüklemeye, ilk haritanızı görüntülemeye, işaretçiler ve işaretçi kümeleme ile çalışmaya, harita üzerinde çizim yapmaya ve kullanıcı etkileşimini yönetmeye kadar tüm temel bilgileri öğrenirsiniz.

Ne oluşturacaksınız?

Bu codelab'de, aşağıdakileri yapan basit bir web uygulaması oluşturacaksınız:

Maps JavaScript API'yi yükler.
Avustralya'nın Sidney şehrini merkezine alan bir harita gösterir.
Sidney'deki popüler turistik yerler için özel işaretçiler gösterir.
İşaretçi gruplamayı uygular.
Bir işaretçi tıklandığında haritayı yeniden ortalayan ve haritada bir daire çizen kullanıcı etkileşimini etkinleştirir.

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 çizim yapma

2. Ön koşullar

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

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 Gereksinimler

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

Faturalandırmanın etkinleştirildiği bir Google Cloud Platform hesabı
Maps JavaScript API'nin etkin olduğu bir Google Haritalar Platformu API anahtarı
JavaScript, HTML ve CSS hakkında temel bilgi
Bilgisayarınızda Node.js yüklü olmalıdır.
Seçtiğiniz bir metin düzenleyici veya IDE

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.

3. Hazırlanın

Google Haritalar Platformu'nu ayarlama

Henüz bir Google Cloud Platform hesabınız ve faturalandırmanın etkinleştirildiği bir projeniz yoksa lütfen faturalandırma hesabı ve proje oluşturmak için 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.

Bu codelab için gereken Google Haritalar Platformu API'lerini ve SDK'larını Google Cloud Marketplace'te etkinleştirin. Bunun için bu videodaki veya bu dokümandaki adımları uygulayın.
Cloud Console'un Kimlik Bilgileri sayfasında bir API anahtarı oluşturun. Bu videodaki veya bu dokümandaki adımları uygulayabilirsiniz. Google Haritalar Platformu'na yapılan tüm istekler için API anahtarı gerekir.

Node.js kurulumu

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

Node.js, bu codelab'in bağımlılıklarını yüklemek için ihtiyacınız olan npm paket yöneticisiyle birlikte gelir.

Proje başlangıç şablonu kurulumu

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

Bu codelab'in GitHub deposunu https://github.com/googlecodelabs/maps-platform-101-js adresinden 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. Çalışmak için ihtiyaç duyduğunuz her şey /starter/src dizininde bulunur. 2. Başlangıç projesini indirdikten sonra npm install dizininde /starter komutunu çalıştırın. Bu komut, package.json içinde listelenen tüm gerekli bağımlılıkları yükler. 3. Bağımlılıkları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'ı kullanabilmeniz için ayarlanmıştır. webpack-dev-server, kodda değişiklik yaptığınız her seferde uygulamanızı tarayıcıda otomatik olarak yeniden yükler.

Çalışan çözüm kodunun tamamını görmek isterseniz 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? Google Haritalar Platformu'nu kullanarak ilk web uygulamanızı oluşturma zamanı!

Google Haritalar Platformu'nu web'de kullanmanın temelini Maps JavaScript API oluşturur. Bu API, harita, işaretçiler, çizim araçları ve Yerler gibi diğer Google Haritalar Platformu hizmetleri de 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 script etiketi ekleyerek bir HTML dosyasına yükleme yapma konusunda bilgi sahibi olabilirsiniz:

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

Bu, API'yi yüklemenin geçerli bir yoludur ancak modern JavaScript'te bağımlılıklar genellikle koddan dinamik olarak dahil edilir. Yukarıdaki script etiketinin kodla eşdeğerini elde etmek için @googlemaps/js-api-loader modülünü kullanırsınız. JS API Loader, projenin package.json dosyasının bağımlılıklarına zaten dahil edildiğinden npm install komutunu daha önce çalıştırdığınızda yüklenmişti.

JS API Loader'ı kullanmak için aşağıdakileri yapın:

/src/app.js adlı kişiyi aç. Bu dosya, bu codelab'deki tüm çalışmalarınızı yapacağınız yerdir.
@googlemaps/js-api-loader'dan Loader sınıfını içe aktarın.

app.js dosyasının en üstüne aşağıdakileri ekleyin:
```
 import { Loader } from '@googlemaps/js-api-loader';
```
apiOptions nesnesi oluşturun.

Loader sınıfı, Google Haritalar Platformu API anahtarınız, API'nin hangi sürümünü yüklemek istediğiniz ve yüklemek istediğiniz Maps JS API tarafından sağlanan ek kitaplıklar dahil olmak üzere Maps JavaScript API'nin yüklenmesiyle ilgili çeşitli seçenekleri belirten bir JSON nesnesi gerektirir. Bu codelab'de yalnızca app.js öğesine aşağıdakileri ekleyerek API anahtarını belirtmeniz gerekir:
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
Loader örneği oluşturun ve apiOptions öğenizi bu örneğe iletin.
```
 const loader = new Loader(apiOptions);
```
Maps JS API'yi yükleyin.

API'yi yüklemek için Loader örneğinde load() işlevini çağırın. JS API Yükleyici, API yüklendikten ve kullanıma hazır hale geldikten sonra çözümlenen bir söz döndürür. API'yi yüklemek ve sözü işlemek için aşağıdaki saplamayı ekleyin:
```
 loader.load().then(() => {
   console.log('Maps JS API loaded');
 });
```

Her şey başarılı olursa tarayıcı konsolunda console.log ifadesini görürsünüz. Chrome'da bu ek pencereye Görünüm -> Geliştirici -> JavaScript Konsolu'ndan erişilebilir.

Özetlemek gerekirse artık Maps JavaScript API'yi koddan dinamik olarak yüklediniz ve Maps JavaScript API yükleme işlemi tamamlandıktan sonra yürütülen geri çağırma işlevini tanımladınız.

app.js dosyanız şöyle görünür:

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

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

    const loader = new Loader(apiOptions);

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

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

5. Harita görüntüleme

İlk haritanızı gösterme zamanı!

Maps JavaScript API'nin en yaygın kullanılan kısmı, harita örnekleri oluşturup değiştirmemize olanak tanıyan sınıf olan google.maps.Map'dır. displayMap() adlı yeni bir işlev oluşturarak bu işlemin nasıl yapıldığını inceleyin.

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

Maps JavaScript API, harita için çeşitli farklı ayarları destekler ancak yalnızca iki ayar gereklidir:
- center: Haritanın merkezinin enlemini ve boylamını ayarlar.
- zoom: Haritanın ilk yakınlaştırma düzeyini ayarlar.
Haritayı Avustralya'nın Sidney şehrinin merkezine yerleştirmek ve şehir merkezini göstermek için ideal olan 14 yakınlaştırma düzeyini uygulamak üzere aşağıdaki kodu kullanın.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
Haritanın DOM'a yerleştirilmesi gereken div öğesini alın.

Haritayı görüntüleyebilmek için Maps JavaScript API'ye sayfada nerede görüntülenmesini istediğinizi söylemeniz gerekir. index.html bölümüne hızlıca göz atarsanız şuna benzeyen bir div olduğunu görürsünüz:
```
 <div id="map"></div>
```
Maps JavaScript API'ye haritanın buraya yerleştirilmesini istediğinizi belirtmek için document.getElementById 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 google.maps.Map örneği oluşturun ve mapDiv ile mapOptions değerlerini iletin. Ayrıca, daha sonra kullanabilmek için bu işlevden Map örneğini döndürürsünüz:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
Haritayı gösterin.

Harita örneğinizi oluşturmayla ilgili tüm mantığı tanımladıktan sonra, Maps JavaScript API yüklendiğinde çağrılması için JS API sözü işleyicisinden displayMap() işlevini çağırmanız yeterlidir:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });
```

Tarayıcınızda artık Sidney'in güzel bir haritasını görmelisiniz:

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

displayMap() işleviniz 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 (isteğe bağlı)

Bulut tabanlı harita stilleri'ni kullanarak haritanızın stilini özelleştirebilirsiniz.

Harita kimliği oluşturma

Henüz ilişkili bir harita stiline sahip 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.
Harita kimliğini harita stiliyle ilişkilendirin.

Uygulamanıza harita kimliği 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ğine iletin.

app.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);
}

Bu işlemi tamamladığınızda, seçtiğiniz stil haritada gösterilir.

7. Haritaya işaretçi ekleme

Geliştiriciler, Maps JavaScript API ile birçok şey yapar ancak haritaya işaretçi yerleştirmek kesinlikle en popüler olanıdır. İşaretçiler, haritada belirli noktaları göstermenizi sağlar ve kullanıcı etkileşimini yönetmek için kullanılan yaygın bir kullanıcı arayüzü öğesidir. Daha önce Google Haritalar'ı kullandıysanız muhtemelen şu şekilde görünen varsayılan işaretçiyi biliyorsunuzdur:

Bu adımda, haritaya işaretçi yerleştirmek için google.maps.Marker simgesini kullanacaksı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 Sydney'deki popüler turistik yerler için aşağıdaki enlem/boylam noktaları kümesine sahip bir locations nesnesi tanımlayın.

Ayrıca, Map örneğinizi işleve iletmeniz gerektiğini unutmayın. Bu değeri daha sonra işaretçi örneklerinizi oluştururken kullanacaksı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 google.maps.Marker örneği oluşturun.

İşaretçilerinizi oluşturmak için aşağıdaki kodu kullanarak locations nesnesini for...in döngüsüyle yineleyin, her işaretçinin nasıl oluşturulması gerektiğiyle ilgili bir seçenek grubu oluşturun ve ardından her konum için google.maps.Marker örneği oluşturun.

markerOptions öğesinin icon özelliğine dikkat edin. Daha önce bahsettiğimiz varsayılan harita işaretini hatırlıyor musunuz? Raptiyeyi istediğiniz resimle özelleştirebileceğinizi biliyor muydunuz? Evet, yapabilirsiniz.

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

Ayrıca, işaretçi örneklerinizi bir dizide saklamanız ve daha sonra kullanılabilmeleri 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, google.maps.Marker öğesinin yeni bir örneği oluşturulduğunda otomatik olarak bir işaretçi oluşturup görüntüler. Bu nedenle, artık tek yapmanız gereken JS API sözü işleyicinizi addMarkers() öğesini çağıracak ve Map örneğinizi iletecek şekilde güncellemek:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

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

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

addMarkers() işleviniz 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ümeleme kullanarak işaretçilerin kullanıcı deneyimini nasıl iyileştireceğinizi öğreneceksiniz.

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

Çok sayıda işaretçi veya birbirine yakın işaretçi kullanırken işaretçilerin çakıştığı ya da ç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 şunları fark etmiş olabilirsiniz:

İşaretçi kümeleme tam da bu noktada devreye girer. İşaretçi kümeleme, yaygın olarak uygulanan bir diğer özelliktir. Bu özellik, yakındaki işaretçileri yakınlaştırma düzeyine bağlı olarak değişen tek bir simge hâlinde gruplandırır. Örneğin:

İşaretçi kümeleme algoritması, haritanın görünür alanını bir tabloya böler ve ardından aynı hücredeki simgeleri kümelendirir. Neyse ki Google Maps Platform ekibi, tüm bu işlemleri sizin için otomatik olarak yapan MarkerClustererPlus adlı faydalı bir açık kaynak yardımcı program kitaplığı oluşturduğu için bu konuda endişelenmenize gerek yok. MarkerClustererPlus'ın kaynak kodunu GitHub'da görüntüleyebilirsiniz.

MarkerCluster dosyasını içe aktarın.

Bu codelab'in şablon projesinde, MarkerClustererPlus yardımcı program kitaplığı package.json dosyasında belirtilen bağımlılıklara zaten dahil edilmiştir. Bu nedenle, bu codelab'in başında npm install komutunu çalıştırdığınızda kitaplığı yüklemişsinizdir.

Kitaplığı içe aktarmak için app.js dosyanızın en üstüne aşağıdakileri ekleyin:
```
 import MarkerClusterer from '@google/markerclustererplus';
```
MarkerClusterer için yeni bir örnek oluşturun.

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

Öncelikle, kullanmak istediğiniz simgelerin yolunu belirten bir nesne tanımlayın. Şablon projesinde, ./img/m'ya kaydedilmiş bir dizi resim zaten var. Resim dosyalarının, aynı önekle sırayla numaralandırıldığını fark edin: m1.png, m2.png, m3.png vb.

İşaretçi kümeleyici seçeneklerinde imagePath özelliğini ayarladığınızda yalnızca yolu ve dosya önekini sağlarsınız. İşaretçi kümeleyici, bu öneke sahip tüm dosyaları otomatik olarak kullanır ve sonuna bir sayı ekler.

İkinci olarak, MarkerClusterer öğesinin yeni bir örneğini oluşturun ve işaretçi kümelerinin görüntülenmesini istediğiniz Map örneğini ve kümelenmesini istediğiniz Marker örneklerinin dizisini iletin.
```
 function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
```
İşaretçi kümelerini gösterir. JS API sözü işleyicisinden

çağrısı yapın.clusterMarkers() İş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);
 });
```

Artık haritanızda birkaç işaretçi kümesi görmeniz gerekir.

Yakınlaştırma veya uzaklaştırma yaptığınızda MarkerClustererPlus'ın kümeleri sizin için otomatik olarak yeniden numaralandırıp yeniden boyutlandırdığını unutmayın. Ayrıca, yakınlaştırmak ve bu kümeye dahil edilen 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 kaynaklı MarkerClustererPlus yardımcı program kitaplığını içe aktardınız ve ö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() işleviniz 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 ele alacağınızı öğreneceksiniz.

9. Kullanıcı etkileşimi ekleme

Artık Sidney'in en popüler turistik yerlerinden bazılarını gösteren harika görünümlü bir haritanız var. 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şimleriyle ilgili bazı ek işlemler ekleyeceksiniz.

Maps JavaScript API, JavaScript etkinlik işleyicilerini kullanarak kodda çeşitli kullanıcı etkileşimlerini işlemenize olanak tanıyan kapsamlı bir etkinlik sistemi sağlar. Örneğin, kullanıcının haritayı ve işaretçileri tıklaması, harita görünümünü kaydırması, yakınlaştırması ve uzaklaştırması gibi etkileşimler için kod yürütmeyi tetikleyecek etkinlik dinleyicileri oluşturabilirsiniz.

Bu adımda, işaretçilerinize bir tıklama işleyici ekleyip ardından haritayı programatik olarak kaydırarak kullanıcının tıkladığı işaretçiyi haritanın merkezine yerleştireceksiniz.

İşaretçilerinize bir tıklama işleyicisi ayarlayın.

Etkinlik sistemini destekleyen Maps JavaScript API'deki tüm nesneler, kullanıcı etkileşimini işlemek için standart bir işlev grubu uygular. Örneğin, addListener ve removeListener gibi işlevler.

Her işaretçiye 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 işlevini çağırın:
```
 function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
```
Bir işaretçi tıklandığında o işaretçiye kaydırın.

click etkinliği, bir kullanıcı işaretçiyi her tıkladığında veya işaretçiye her dokunduğunda tetiklenir ve tıklanan kullanıcı arayüzü öğesiyle ilgili bilgileri içeren bir etkinliği JSON nesnesi olarak döndürür. Haritanın kullanıcı deneyimini iyileştirmek için click etkinliğini işleyebilir ve tıklanan işaretçinin enlemini ve boylamını almak için LatLng nesnesini kullanabilirsiniz.

Bunu yaptıktan sonra, haritanın tıklanan işaretçiye sorunsuz bir şekilde kaydırılarak yeniden ortalanması için aşağıdaki kodu etkinlik işleyicinin geri çağırma işlevine ekleyerek 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 sözü işleyicisinden addPanToMarker() işlevini çağırın ve kodu yürütmek ve tıklama işleyicilerinizi 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 ortalandığını görürsünüz.

Özetlemek gerekirse bu adımda, haritadaki tüm işaretçilere bir tıklama işleyici atamak için Maps JavaScript API'nin etkinlik sistemini kullandınız, tetiklenen tıklama etkinliğinden işaretçinin enlemini ve boylamını aldınız ve bir işaretçi her tıklandığında haritayı yeniden ortalamak için bu bilgileri kullandınız.

addPanToMarker() işleviniz 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;
    }

Sadece bir adım kaldı. Ardından, Maps JavaScript API'nin çizim özelliklerini kullanarak haritanın kullanıcı deneyimini daha da iyileştireceksiniz.

10. Harita üzerinde çizin

Şimdiye kadar, popüler turistik yerler için işaretçiler gösteren ve kullanıcı etkileşimini yöneten bir Sidney haritası oluşturdunuz. Bu codelab'in son adımında, Haritalar JavaScript API'nin çizim özelliklerini kullanarak harita deneyiminize ek bir faydalı özellik ekleyeceksiniz.

Bu haritanın, Sidney şehrini keşfetmek isteyen kullanıcılar tarafından kullanılacağını düşünün. Faydalı bir özellik, bir işaretçi tıklandığında etrafındaki yarıçapı görselleştirmektir. Bu sayede kullanıcı, tıklanan işaretçiye yürüme mesafesinde olan diğer yerleri kolayca anlayabilir.

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

google.maps.Circle ile daire çizin.

Maps JavaScript API'deki çizim işlevleri, çizilen bir nesnenin haritada nasıl görüneceği konusunda çok çeşitli seçenekler sunar. Dairesel bir yarıçap oluşturmak için daireyle ilgili bir dizi seçenek (ör. renk, kontur ağırlığı, dairenin merkezlenmesi gereken yer ve yarıçapı) bildirin, ardından yeni bir daire oluşturmak için google.maps.Circle öğesinin yeni bir örneğini 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, yukarıda yazdığınız drawCircle() işlevini addPanToMarker() içindeki tıklama işleyicisi geri çağırmasından çağırmak ve işaretçinin haritasını ve konumunu iletmektir.

circle.setMap(null) işlevini çağıran koşullu bir ifadenin de eklendiğine dikkat edin. Bu işlev, kullanıcı başka bir işaretçiyi tıkladığında daha önce oluşturulan daireyi haritadan kaldırır. Böylece, kullanıcı haritayı keşfederken harita dairelerle kaplanmaz.

addPanToMarker() işleviniz 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);
     });
   });
 }
```

İşlem tamamlandı Tarayıcınıza gidin ve işaretçilerden birini tıklayın. Etrafında dairesel bir yarıçap oluşturulduğunu görürsünüz:

11. Tebrikler

Google Maps Platform'u kullanarak ilk web uygulamanızı başarıyla oluşturdunuz. Bu süreçte Maps JavaScript API'yi yükleme, harita yükleme, işaretçilerle çalışma, haritayı kontrol etme ve harita üzerinde çizim yapma, kullanıcı etkileşimi ekleme gibi işlemleri gerçekleştirdiniz.

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

Sırada ne var?

Bu kod laboratuvarında, Maps JavaScript API ile yapabileceklerinizin temel bilgilerini öğrendiniz. Ardından, 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östermek için bilgi pencereleri ekleyin.
Maps JavaScript API için kullanılabilen ve Yerler, çizim ve görselleştirme gibi ek işlevler sağlayan diğer kitaplıklara göz atın.

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