Menambahkan Peta Google dengan Penanda menggunakan HTML

Pengantar

Tutorial ini menunjukkan cara menambahkan peta Google dengan penanda ke halaman web menggunakan elemen HTML kustom. Berikut peta yang akan Anda buat menggunakan tutorial ini. Penanda diposisikan di Ottumwa, Iowa.

Memulai

Berikut langkah-langkah yang akan kita bahas untuk membuat peta Google dengan penanda menggunakan HTML:

  1. Dapatkan kunci API
  2. Buat HTML, CSS, dan JS
  3. Tambahkan peta
  4. Tambahkan penanda

Anda membutuhkan browser web. Pilih salah satu browser yang sudah terkenal seperti Google Chrome (direkomendasikan), Firefox, Safari, atau Edge, berdasarkan platform Anda dari daftar browser yang didukung.

Langkah 1: Dapatkan kunci API

Bagian ini menjelaskan cara mengautentikasi aplikasi ke Maps JavaScript API menggunakan kunci API Anda sendiri.

Ikuti langkah-langkah ini untuk mendapatkan kunci API:

  1. Buka Konsol Google Cloud.

  2. Buat atau pilih project.

  3. Klik Continue untuk mengaktifkan API dan layanan terkait.

  4. Pada halaman Credentials, dapatkan API key (dan tetapkan pembatasan kunci API). Catatan: Jika Anda memiliki kunci API yang tidak dibatasi, atau kunci dengan pembatasan browser, Anda boleh menggunakan kunci tersebut.

  5. Untuk mencegah pencurian kuota dan mengamankan kunci API Anda, lihat Menggunakan Kunci API.

  6. Aktifkan penagihan. Lihat Penggunaan dan Penagihan untuk informasi selengkapnya.

  7. Anda kini siap menggunakan kunci API Anda.

Langkah 2: Buat HTML, CSS, dan JS

Berikut kode untuk halaman web HTML dasar:

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

Agar dapat memuat peta, Anda harus menambahkan tag script yang berisi loader bootstrap untuk Maps JavaScript API, seperti yang ditampilkan dalam cuplikan berikut (tambahkan kunci API Anda sendiri):

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

Karena halaman HTML harus berdiri sendiri, tambahkan kode CSS langsung ke halaman:

<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
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Langkah 3: Tambahkan peta

Untuk menambahkan peta Google ke halaman, salin elemen HTML gmp-map lalu tempelkan dalam body halaman HTML:

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Tindakan ini akan membuat peta yang berpusat di Ottumwa, Iowa, tetapi belum ada penanda.

Langkah 4: Tambahkan penanda

Untuk menambahkan penanda ke peta, gunakan elemen HTML gmp-advanced-marker. Salin cuplikan berikut, lalu tempelkan dengan menimpa seluruh gmp-map yang Anda tambahkan pada langkah sebelumnya.

<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

Kode sebelumnya menambahkan penanda ke peta. ID peta diperlukan untuk menggunakan Penanda Lanjutan (DEMO_MAP_ID boleh digunakan).

Coba contoh yang sudah selesai di JSFiddle.

Tips dan pemecahan masalah

  • Anda dapat menyesuaikan peta dengan gaya visual kustom.
  • Gunakan Konsol Alat Developer di browser web untuk menguji dan menjalankan kode, membaca laporan error, dan menyelesaikan masalah pada kode.
  • Gunakan pintasan keyboard berikut untuk membuka konsol di Chrome:
    Command+Option+J (di Mac), atau Control+Shift+J (di Windows).

  • Ikuti langkah-langkah di bawah ini untuk mendapatkan koordinat lintang dan bujur untuk lokasi di Google Maps.

    1. Buka Google Maps di browser.
    2. Klik kanan lokasi persis di peta yang Anda perlukan koordinatnya.
    3. Pilih Ada apa di sini dari menu konteks yang muncul. Peta menampilkan kartu di bagian bawah layar. Temukan koordinat lintang dan bujur di baris terakhir kartu.

  • Anda dapat mengubah alamat menjadi koordinat lintang dan bujur menggunakan layanan Geocoding. Panduan developer memberikan informasi mendetail tentang memulai layanan Geocoding.

Contoh kode lengkap

Berikut peta yang sudah selesai beserta contoh kode lengkap yang digunakan untuk tutorial ini.

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