HTML kullanarak İşaretçileri olan bir Google Haritası ekleme

Giriş

Bu eğitimde, HTML kullanılarak bir web sayfasına işaretçi içeren bir Google haritasının nasıl ekleneceği gösterilmektedir. Bu eğitimde oluşturacağınız harita aşağıda verilmiştir. Biri Kaliforniya'nın Mountain View şehrinde, diğeri de Washington'un Seattle şehrinde olmak üzere iki işaretçi yerleştirilir.

Başlayın

HTML kullanarak işaretçi içeren bir Google haritası oluşturmak için uygulayacağımız adımlar şunlardır:

  1. API anahtarı alma
  2. HTML, CSS ve JS oluşturma
  3. Harita ekleme
  4. İşaretçi ekleme

Web tarayıcısı kullanmanız gerekir. Desteklenen tarayıcılar listesinden platformunuza göre Google Chrome (önerilir), Firefox, Safari veya Edge gibi iyi bilinen bir tarayıcı seçin.

1. Adım: API anahtarı alın

Bu bölümde, kendi API anahtarınızı kullanarak uygulamanızın Maps JavaScript API ile nasıl kimlik doğrulaması yapacağı açıklanmaktadır.

API anahtarı almak için aşağıdaki adımları uygulayın:

  1. Google Cloud Console'a gidin.

  2. Proje oluşturun veya seçin.

  3. API'yi ve ilgili hizmetleri etkinleştirmek için Devam'ı tıklayın.

  4. Kimlik bilgileri sayfasında bir API anahtarı alın (ve API anahtarı kısıtlamalarını ayarlayın). Not: Kısıtlanmamış bir API anahtarınız veya tarayıcı kısıtlamaları olan bir anahtarınız varsa bu anahtarı kullanabilirsiniz.

  5. Kota hırsızlığını önlemek ve API anahtarınızın güvenliğini sağlamak için API Anahtarları'nı Kullanma başlıklı makaleyi inceleyin.

  6. Faturalandırmayı etkinleştirin. Daha fazla bilgi için Kullanım ve Faturalandırma başlıklı makaleyi inceleyin.

  7. Artık API anahtarınızı kullanmaya hazırsınız.

2. Adım: HTML, CSS ve JS oluşturun

Aşağıda, temel bir HTML web sayfasının kodu yer almaktadır:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Harita yüklemek için aşağıdaki snippet'te gösterildiği gibi Maps JavaScript API için önyükleme yükleyicisini içeren bir script etiketi eklemeniz gerekir (kendi API anahtarınızı ekleyin):

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker&v=beta"
    defer
></script>

Spoiler uyarısı: Tamamlanmış örneği JSFiddle'da deneyin.

3. Adım: Harita ekleyin

Sayfaya Google haritası eklemek için gmp-map HTML öğesini kopyalayıp HTML sayfasının body içine yapıştırın:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Bu işlem sonucunda aşağıdaki harita oluşturulur:

Yeni oluşturduğunuz harita, San Jose metropol bölgesinin ortasına yerleştirilmiştir.

4. Adım: İşaretçi ekleyin

Haritaya işaretçi eklemek için gmp-advanced-marker HTML öğesini kullanın. Aşağıdaki snippet'i kopyalayıp önceki adımda eklediğiniz gmp-map öğesinin üzerine yapıştırın.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

Önceki kod, iki işaretçi ekler ve bu işaretçileri daha iyi göstermek için gmp-map üzerindeki zoom ve center parametrelerini değiştirir. Gelişmiş işaretçileri kullanmak için bir harita kimliği gereklidir (DEMO_MAP_ID kullanılabilir).

İpuçları ve sorun giderme

  • Haritayı özel stil ile özelleştirebilirsiniz.
  • Kodunuzu test etmek ve çalıştırmak, hata raporlarını okumak ve kodunuzla ilgili sorunları çözmek için web tarayıcınızdaki Geliştirici Araçları Konsolu'nu kullanın.
  • Chrome'da konsolu açmak için aşağıdaki klavye kısayollarını kullanın:
    Command+Option+J (Mac'te) veya Control+Shift+J (Windows'ta).

  • Google Haritalar'da bir konumun enlem ve boylam koordinatlarını almak için aşağıdaki adımları uygulayın.

    1. Google Haritalar'ı bir tarayıcıda açın.
    2. Koordinatlarını öğrenmek istediğiniz konumu haritada sağ tıklayın.
    3. Görüntülenen içerik menüsünden Burada ne var?'ı seçin. Harita, ekranın alt kısmında bir kart gösterir. Kartın son satırında enlem ve boylam koordinatlarını bulun.

  • Coğrafi kodlama hizmetini kullanarak bir adresi enlem ve boylam koordinatlarına dönüştürebilirsiniz. Geliştirici kılavuzlarında, coğrafi kodlama hizmetini kullanmaya başlama hakkında ayrıntılı bilgi verilmektedir.

Tam örnek kod

Aşağıda, nihai harita ve bu eğitimde kullanılan örnek kodun tamamı verilmiştir.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html