HTML kullanarak işaretçiler içeren bir Google Haritası ekleme

Giriş

Bu eğiticide, özel HTML öğelerini kullanarak bir web sayfasına işaretçi içeren Google Haritası'nın nasıl ekleneceği gösterilmektedir. Bu eğitimle oluşturacağınız haritayı aşağıda görebilirsiniz. Biri Kaliforniya'nın Mountain View şehrinde, diğeri Washington'ın 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 ele alacağı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ınız olmalıdır. Desteklenen tarayıcılar listesinden platformunuza göre Google Chrome (önerilir), Firefox, Safari veya Edge gibi bilinen bir tarayıcıyı 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'de nasıl kimlik doğrulayacağı 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ış mevcut 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

Temel bir HTML web sayfasının kodu aşağıda verilmiştir:

<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>

Bir harita yüklemek için aşağıdaki snippet'te gösterildiği gibi Maps JavaScript API'nin bootstrap 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"
    defer
></script>

Spoiler uyarısı: Bitmiş ö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 bölümüne 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 merkezinde yer alıyor.

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ın ve önceki adımda eklediğiniz gmp-map'nın tamamının ü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

Yukarıdaki 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 harita kimliği gereklidir (DEMO_MAP_ID kullanılabilir).

İpuçları ve sorun giderme

  • Haritayı özel stil ile özelleştirebilirsiniz.
  • Kodunuzu test edip ç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'da).

  • 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ı istediğiniz konumu haritada sağ tıklayın.
    3. Görüntülenen içerik menüsünden Burada ne var?'ı seçin. Haritada ekranın alt kısmında bir kart gösterilir. Enlem ve boylam koordinatlarını kartın son satırında bulabilirsiniz.

  • 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, bu eğitimde kullanılan nihai harita ve tam örnek kod 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