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. Iowa, Ottumwa'da bir işaretçi konumlandırılmış.

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ğrulaması yapılacağı 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="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Bu işlem, Iowa, Ottumwa merkezli bir harita oluşturur ancak henüz işaretçi yoktur.

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="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID"
>
  <gmp-advanced-marker
    position="41.027748173921374, -92.41852445367961"
    title="Ottumwa, IA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

Önceki kod, haritaya bir işaretçi ekler. Gelişmiş işaretçileri kullanmak için harita kimliği gerekir (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 Hizmeti'ni 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>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </head>
  <body>
    <gmp-map
      center="41.027748173921374, -92.41852445367961"
      zoom="13"
      map-id="DEMO_MAP_ID"
    >
      <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"
      ></gmp-advanced-marker>
    </gmp-map>
  </body>
</html>
index.html