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

Giriş

Bu eğitimde, özel HTML öğeleri kullanarak bir web sayfasına işaretçili Google haritası ekleme işlemi gösterilmektedir. Bu eğitimde oluşturacağınız haritayı aşağıda görebilirsiniz. Ottumwa, Iowa'da bir işaretçi var.

Başlayın

HTML kullanarak işaretçili 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ı 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'de kimliğini nasıl doğrulayacağınız 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 bölümüne bakın.

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

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

Aşağıda, basit 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 Maps JavaScript API'nin önyükleyicisini içeren bir script etiketi eklemeniz gerekir. Bu etiketi aşağıdaki snippet'te gösterildiği gibi ekleyebilirsiniz (kendi API anahtarınızı ekleyin):

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

HTML sayfasının bağımsız olması gerektiğinden CSS kodunu doğrudan sayfaya ekleyin:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

3. adım: Harita ekleme

Sayfaya bir Google haritası eklemek için gmp-map HTML öğesini kopyalayıp HTML sayfasının body öğesinin içine 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, Ottumwa, Iowa'yı merkeze alan bir harita oluşturur ancak henüz işaretçi yoktur.

4. adım: İşaretçi ekleme

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 öğesinin 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>

Yukarıdaki kod, haritaya bir işaretçi ekler. Gelişmiş işaretçileri kullanmak için harita kimliği gerekir (DEMO_MAP_ID kullanılabilir).

JSFiddle'da tamamlanmış örneği deneyin.

İpuçları ve sorun giderme

  • Haritayı özel stillerle ö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. Haritada koordinatlarını öğrenmek istediğiniz tam konumu sağ tıklayın.
    3. Açılan bağlam menüsünden Burada ne var? seçeneğini belirleyin. Harita, ekranın alt kısmında bir kart gösterir. Kartın son satırında enlem ve boylam koordinatlarını bulun.

  • Geocoding hizmetini kullanarak bir adresi enlem ve boylam koordinatlarına dönüştürebilirsiniz. Geliştirici kılavuzlarında, Geocoding Service'i kullanmaya başlama hakkında ayrıntılı bilgi verilmektedir.

Tam kod örneği

Aşağıda, bu eğitim için kullanılan nihai harita ve tam örnek kod yer almaktadır.

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></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>