Menambahkan Peta Google dengan Penanda menggunakan HTML

Pengantar

Tutorial ini menunjukkan cara menambahkan peta Google dengan penanda ke halaman web menggunakan HTML. Berikut peta yang akan Anda buat menggunakan tutorial ini. Ada dua penanda yang diposisikan, satu di Mountain View, CA, dan satu lagi di Seattle, WA.

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 sebuah 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. Setelah Anda mendapatkan kunci API, tambahkan kunci tersebut ke cuplikan berikut dengan mengklik "YOUR_API_KEY". Salin dan tempelkan tag skrip bootstrap untuk digunakan di halaman web Anda sendiri.

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

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 async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap&libraries=map,marker">

Catatan: Coba contoh yang sudah selesai di JSFiddle.

Langkah 3: Tambahkan peta

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

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

Tindakan ini akan menghasilkan peta berikut:

Peta yang baru saja Anda buat dipusatkan pada wilayah metropolitan San Jose.

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

Kode di atas menambahkan dua penanda serta mengubah parameter zoom dan center pada gmp-map untuk menampilkan penanda tersebut dengan lebih baik. ID peta diperlukan untuk menggunakan Penanda Lanjutan (DEMO_MAP_ID boleh digunakan).

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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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&callback=initMap&libraries=marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html