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 atomik, seperti menampilkan peringkat 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 terbiasa dengan 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é.

peta area San José

HTML

<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

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

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

Dalam contoh ini, ada beberapa hal yang perlu diperhatikan:

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

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

Sama seperti seseorang dapat menggabungkan tag HTML bawaan untuk membuat hierarki konten yang kompleks, dia juga dapat menggabungkan <gmp-advanced-marker> di dalam elemen untuk menampilkan satu atau lebih penanda peta.

peta dengan penanda

HTML

<html>
  <head>
    <title>Simple Map with Markers</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </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>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

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

Peristiwa JavaScript

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

peristiwa klik penanda

HTML

<html>
<head>
  <title>Google Maps - Marker Click Example</title>
  <link rel="stylesheet" href="style.css" type="text/css">

  <script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
  </script>

  <script>
    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} = await google.maps.importLibrary("maps");
            const infoWindow = new InfoWindow({
              content: advancedMarker.title
            });
            infoWindow.open({
              anchor: advancedMarker
            });
          });
        });
      }
    }
  </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>

</body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

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