Menambahkan Peta Google ke Halaman Web

Anda dapat menambahkan peta Google ke halaman web menggunakan kode HTML, CSS, dan JavaScript. Halaman ini menunjukkan cara menambahkan peta ke halaman web, lalu mengakses instance peta secara terprogram.

Ringkasan

Untuk memuat peta, halaman web Anda harus melakukan proses berikut:

  • Muat Maps JavaScript API menggunakan loader bootstrap. Di sinilah kunci API Anda diteruskan. Kunci API dapat ditambahkan ke file sumber HTML atau JavaScript.
  • Menambahkan peta ke halaman HTML, dan menambahkan gaya CSS yang diperlukan.
  • Memuat library maps dan melakukan inisialisasi peta.

Menambahkan peta menggunakan elemen gmp-map

Elemen gmp-map adalah cara yang lebih disarankan untuk menambahkan peta Google ke halaman web. Elemen ini adalah elemen HTML kustom yang dibuat menggunakan komponen web. Untuk menambahkan peta ke halaman web menggunakan elemen gmp-map, lakukan langkah-langkah berikut.

  1. Tambahkan elemen script yang berisi bootstrap ke halaman HTML, atau tambahkan ke file sumber JavaScript atau TypeScript tanpa elemen script. Konfigurasi bootstrap dengan kunci API Anda dan opsi lainnya. Anda dapat memilih impor pustaka dinamis atau pemuatan skrip langsung. Contoh ini menunjukkan penambahan bootstrap pemuatan skrip langsung ke halaman HTML:

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

    Pelajari lebih lanjut cara memuat Google Maps JavaScript API

  2. Di halaman HTML, tambahkan elemen gmp-map. Tentukan koordinat lintang dan bujur untuk center (wajib), nilai zoom untuk zoom (wajib), dan map-id jika diperlukan (wajib untuk beberapa fitur seperti Penanda Lanjutan). Atribut CSS height diperlukan agar peta dapat dilihat. Dapat ditentukan di HTML atau CSS. Dalam contoh ini, atribut gaya height ditentukan di HTML agar lebih sederhana.

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

Kode contoh lengkap

<html>
  <head>
    <title>Add a Map using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></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=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Menambahkan peta menggunakan elemen div (lama) dan JavaScript

Untuk menambahkan peta ke halaman web menggunakan elemen div, lakukan langkah-langkah berikut.

  1. Tambahkan elemen script yang berisi bootstrap ke halaman HTML, atau tambahkan ke file sumber JavaScript atau TypeScript tanpa elemen script. Konfigurasi bootstrap dengan kunci API Anda dan opsi lainnya. Anda dapat memilih impor pustaka dinamis atau pemuatan skrip langsung. Contoh ini menunjukkan penambahan bootstrap dinamis ke halaman HTML:

    <script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

    Pelajari lebih lanjut cara memuat Google Maps JavaScript API

  2. Di halaman HTML, tambahkan elemen div untuk menyimpan peta.

    <div id="map"></div>

  3. Di CSS, tetapkan tinggi peta ke 100%. Atribut CSS height diperlukan agar peta dapat dilihat.

    #map {
  height: 100%;
}

  4. Di file JavaScript, buat fungsi untuk memuat library maps dan melakukan inisialisasi peta. Tentukan koordinat lintang dan bujur untuk center, dan tingkat zoom yang akan digunakan untuk zoom. Jika perlu, tambahkan ID peta menggunakan properti map-id.

    let map;
async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
initMap();
    index.js

Kode contoh lengkap

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

JavaScript

let map;
async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Simple Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

Mencoba Contoh

Menetapkan dan mendapatkan properti pada instance peta

Untuk berinteraksi dengan instance peta, pilih elemen yang memuatnya. Kode untuk melakukannya akan bervariasi, bergantung pada apakah Anda menggunakan elemen gmp-map atau elemen div.

Mendapatkan instance peta dari elemen gmp-map

Untuk mendapatkan instance peta saat menggunakan elemen gmp-map, gunakan document.querySelector untuk mengambil instance mapElement, seperti yang ditunjukkan di sini.

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

Kemudian, tetapkan properti pada instance mapElement:

mapElement.zoom = 8;

Class MapElement menggunakan class Map secara internal; akses class Map menggunakan properti MapElement.innerMap, seperti yang ditunjukkan di sini:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

Mendapatkan instance peta dari elemen div

Saat menggunakan elemen div, dapatkan instance peta dan tetapkan opsi pada waktu inisialisasi:

map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapTypeControl: false,
});

Setelah inisialisasi, tetapkan opsi pada instance map seperti yang ditunjukkan di sini:

map.setOptions({
    zoom: 8,
});