Komponen Web di Maps JavaScript API (Pratinjau)

Komponen Web adalah standar W3C populer yang menyatukan HTML, CSS, dan JS dalam elemen HTML khusus dan dapat digunakan kembali. Komponen yang dapat digunakan kembali ini dapat berkisar dari fungsionalitas sederhana, seperti menampilkan rating bintang untuk suatu tempat hingga logika bisnis yang lebih kompleks. Panduan ini menjelaskan Komponen Web yang tersedia di Maps JavaScript API.

Untuk informasi lebih lanjut tentang standar itu sendiri, lihat Komponen Web.

Audiens

Dokumentasi ini dirancang agar Anda dapat dengan cepat mulai menjelajahi dan mengembangkan aplikasi dengan Komponen Web. Anda harus sudah memahami konsep pemrograman HTML dan CSS.

Menampilkan Peta

Cara termudah untuk mulai belajar tentang Komponen Web adalah dengan melihat contohnya. Contoh berikut menampilkan peta area San José.

TypeScript

// This example adds a map using web components.
function initMap(): void {
    console.log('Maps JavaScript API loaded.');
}

declare global {
    interface Window {
        initMap: () => void;
    }
}
window.initMap = initMap;index.ts

JavaScript

// This example adds a map using web components.
function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = 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;
}

gmp-map {
  height: 400px;
}
style.css

HTML

<html>
  <head>
    <title>Add a Map Web Component</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="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
    ></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&v=beta"
      defer
    ></script>
  </body>
</html>index.html

Mencoba Contoh

JSFiddle.net Google Cloud Shell

Dalam contoh ini, ada beberapa hal yang perlu diperhatikan:

Maps JavaScript API dipanggil secara asinkron. Fungsi callback digunakan untuk mengetahui kapan API telah dimuat.
Presentasi peta ditentukan dengan elemen khusus <gmp-map>.
Properti peta ditentukan dengan menentukan atribut dalam elemen khusus <gmp-map>.
Gaya visual dapat diterapkan sebagai bagian dari elemen khusus atau dideklarasikan dalam file CSS terpisah.

Atur gaya peta dasar

ID peta adalah ID yang dikaitkan dengan gaya atau fitur peta tertentu. Untuk memanfaatkan fitur konfigurasi cloud opsional, ganti gaya visual peta berbasis cloud DEMO_MAP_ID dengan ID peta Anda sendiri. Untuk mempelajari cara membuat ID peta dan mengonfigurasi gaya kustom, kunjungi Gaya Visual Peta Berbasis Cloud.

Menambahkan penanda ke peta

Tag HTML bawaan dapat digabungkan untuk membuat hierarki konten yang kompleks, dan <gmp-advanced-marker> juga dapat digabungkan di dalam elemen untuk menampilkan satu atau lebih penanda peta.

TypeScript

// This example adds a map with markers, using web components.
function initMap(): void {
    console.log('Maps JavaScript API loaded.');
}

declare global {
    interface Window {
        initMap: () => void;
    }
}
window.initMap = initMap;index.ts

JavaScript

// This example adds a map with markers, using web components.
function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = 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;
}

gmp-map {
  height: 400px;
}
style.css

HTML

<html>
  <head>
    <title>Add a Map with Markers using Web Components</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">
      <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

Mencoba Contoh

JSFiddle.net Google Cloud Shell

Di sini kami telah menambahkan dua elemen <gmp-advanced-marker> di dalam elemen kustom <gmp-map>. Teks untuk title menyediakan teks keterangan kursor tambahan dan label aksesibilitas untuk elemen yang ditentukan.

Peristiwa JavaScript

Manfaat utama Komponen Web adalah kemudahan penggunaan. Dengan beberapa baris kode, seseorang yang memiliki pengetahuan JavaScript terbatas atau kemampuan pemrograman tingkat lanjut dapat menampilkan peta. Setelah diimplementasikan, kode akan mengikuti pola umum dari elemen HTML lainnya. Misalnya, seseorang dapat menggunakan sistem peristiwa browser native untuk menanggapi tindakan Peta atau Penanda Lanjutan, seperti klik penanda.

TypeScript

// This example adds a map using web components.
function initMap(): void {
  console.log('Maps JavaScript API loaded.');
  const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker");
  for (const advancedMarker of advancedMarkers) {

    customElements.whenDefined(advancedMarker.localName).then(async () => {
      advancedMarker.addEventListener('gmp-click', async () => {

        const infoWindow = new google.maps.InfoWindow({
          //@ts-ignore
          content: advancedMarker.title,
        });
        infoWindow.open({
          //@ts-ignore
          anchor: advancedMarker
        });
      });
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example adds a map using web components.
function initMap() {
  console.log("Maps JavaScript API loaded.");

  const advancedMarkers = document.querySelectorAll(
    "#marker-click-event-example gmp-advanced-marker",
  );

  for (const advancedMarker of advancedMarkers) {
    customElements.whenDefined(advancedMarker.localName).then(async () => {
      advancedMarker.addEventListener("gmp-click", async () => {
        const infoWindow = new google.maps.InfoWindow({
          //@ts-ignore
          content: advancedMarker.title,
        });

        infoWindow.open({
          //@ts-ignore
          anchor: advancedMarker,
        });
      });
    });
  }
}

window.initMap = 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;
}

gmp-map {
  height: 400px;
}
style.css

HTML

<html>
  <head>
    <title>Add a Map Web Component with Events</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
      id="marker-click-event-example"
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
    >
      <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

Mencoba Contoh

JSFiddle.net Google Cloud Shell

Dalam contoh ini, initMap merepresentasikan fungsi callback yang diperlukan setelah Maps JavaScript API dimuat sepenuhnya. Kode menetapkan pemroses ke setiap penanda dan menampilkan jendela info saat setiap penanda diklik.

Langkah berikutnya

Minta fitur dan laporkan bug di Issue Tracker Maps JavaScript API.
Jelajahi Library Komponen yang Diperluas untuk Komponen Web pada tingkat yang lebih tinggi seperti ringkasan tempat.