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

Giriş

Bu eğitim, bir web sayfasına işaretçi içeren bir Google haritasını nasıl ekleyeceğinizi gösterir ekleyebilirsiniz. Bu eğiticiyi kullanarak oluşturacağınız haritayı aşağıda bulabilirsiniz. İki işaretleyici biri Mountain View, Kaliforniya'da, biri de Seattle, WA'da.

Başlayın

Bunlar, Google Haritalar API'larını kullanarak işaretçi içeren bir Google haritası HTML:

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

Web tarayıcısı gerekir. Google Chrome gibi iyi bilinen bir uygulama seçin (önerilir), Firefox, Safari veya Edge, desteklenen tarayıcıların listesine göz atın.

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

Bu bölümde, Maps JavaScript API'yi kendi API anahtarınızı kullanarak oluşturun.

API anahtarı almak için şu adımları uygulayın:

  1. Şuraya gidin: Google Cloud Console'da oturum açın.

  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 kısıtlamaları). Not: Mevcut bir kısıtlanmamış API anahtarınız veya anahtarınız varsa söz konusu anahtarı kullanabilirsiniz.

  5. Kota hırsızlığını önlemek ve API anahtarınızın güvenliğini sağlamak için bkz. API Anahtarlarını Kullanma.

  6. Faturalandırmayı etkinleştir. Kullanım ve Faturalandırma'yı inceleyin konulu videomuzu izleyin.

  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 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 haritayı yüklemek için şunu içeren bir script etiketi eklemeniz gerekir: aşağıdaki örnekte gösterildiği gibi, Maps JavaScript API için bootstrap yükleyicisi aşağıdaki snippet'i ekleyin (kendi API anahtarınızı ekleyin):

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

Spoiler uyarısı: JSFiddle'daki tamamlanmış örneği deneyin.

3. Adım: Bir harita ekleyin

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

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

Bu işlem aşağıdaki haritayla sonuçlanır:

Oluşturduğunuz haritanın merkezinde San Jose metropol alanı yer alır.

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 vegmp-map önceki adım.

<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 zoom ve center öğelerini değiştirir. parametrelerini gmp-map üzerinde düzenleyin. Harita kimliği gerekli (DEMO_MAP_ID kullanılabilir).

İpuçları ve sorun giderme

  • Haritayı özel stil ile özelleştirebilirsiniz.
  • Uygulamanızı test edip çalıştırmak için web tarayıcınızda Geliştirici Araçları Konsolu'nu kodlayabilir, hata raporlarını okuyabilir ve kodunuzla ilgili sorunları çözebilirsiniz.
  • Chrome'da konsolu açmak için aşağıdaki klavye kısayollarını kullanın:
    Command+Option+J (Mac'te) veya Control+Üst Karakter+J (Windows'da).

  • Enlem ve veri miktarını öğrenmek için aşağıdaki adımları Google Haritalar'da bir konumun boylam koordinatları.

    1. Google Haritalar'ı bir tarayıcıda açın.
    2. Harita üzerinde tam olarak ihtiyacınız olan konumu sağ tıklayın koordinatlar.
    3. Görüntülenen içerik menüsünden Burada ne var? seçeneğini belirleyin. Harita, ekranın alt kısmında bir kart gösterir. Enlemi bulma ve boylam koordinatlarını değiştirin.

  • Bir adresi enlem ve boylam koordinatlarına Coğrafi kodlama hizmeti. Geliştirici kılavuzlarında, Coğrafi Kodlama hizmetini kullanmaya başlama hakkında daha fazla bilgi edinin.

Tam örnek kod

Aşağıda, nihai harita ve bu işlem için kullanılan tam örnek kod verilmiştir eğiticidir.

<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