Componenti web nell'API Maps JavaScript (anteprima)

I componenti web sono un noto standard W3C che incapsula HTML, CSS e JS in elementi HTML personalizzati e riutilizzabili. Questi componenti riutilizzabili possono variare da funzionalità atomiche, come la visualizzazione della valutazione a stelle di un luogo, a una logica di business più complessa. Questa guida descrive i componenti web disponibili nell'API Maps JavaScript.

Per ulteriori informazioni sullo standard, consulta la sezione Componenti web.

Pubblico

Questa documentazione è progettata per consentirti di iniziare rapidamente a esplorare e sviluppare applicazioni con i componenti web. Dovresti conoscere i concetti di programmazione HTML e CSS.

Visualizzazione di una mappa

Il modo più semplice per iniziare a conoscere i componenti web è guardare un esempio. L'esempio seguente mostra una mappa dell'area di San Jose.

una mappa dell'area di San Jose

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

In questo esempio ci sono alcuni aspetti da considerare:

  1. L'API Maps JavaScript viene chiamata in modo asincrono. La funzione di callback viene utilizzata per sapere quando l'API è stata caricata.
  2. La presentazione della mappa è definita con l'elemento personalizzato <gmp-map>.
  3. Le proprietà della mappa vengono definite specificando gli attributi nell'elemento personalizzato <gmp-map>.
  4. Gli stili possono essere applicati in linea a elementi personalizzati o dichiarati in un file CSS separato.

Applica uno stile alla mappa base

Un ID mappa è un identificatore associato a uno stile o a un elemento di mappa specifico. Per sfruttare le funzionalità facoltative di configurazione cloud, sostituisci la personalizzazione delle mappe basata su cloud DEMO_MAP_ID con il tuo ID mappa. Per scoprire come creare un ID mappa e configurare uno stile personalizzato, consulta la pagina Stili di Maps basati su cloud.

Aggiungi indicatori alla mappa

Così come è possibile nidificare i tag HTML integrati per creare gerarchie di contenuti complesse, è possibile anche nidificare <gmp-advanced-marker> all'interno di un elemento per visualizzare uno o più indicatori sulla mappa.

mappa con indicatori

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

Qui abbiamo aggiunto due elementi <gmp-advanced-marker> all'interno dell'elemento personalizzato <gmp-map>. Testo per title fornisce un testo aggiuntivo al passaggio del mouse e un'etichetta di accessibilità per l'elemento specificato.

Eventi JavaScript

Uno dei principali vantaggi dei componenti web è la facilità d'uso. Con poche righe di codice, è possibile visualizzare una mappa con una conoscenza limitata di JavaScript o di programmazione avanzata. Una volta implementato, il codice segue i pattern familiari di altri elementi HTML. Ad esempio, puoi utilizzare il sistema di eventi del browser nativo per reagire alle azioni della mappa o dell'indicatore avanzato, come il clic su un indicatore.

evento di clic sull&#39;indicatore

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

In questo esempio, initMap rappresenta la funzione di callback obbligatoria una volta caricata completamente l'API Maps JavaScript. Il codice stabilisce i listener di ogni indicatore e presenta una finestra informativa quando viene fatto clic su ogni indicatore.

Passaggi successivi