Visualizzare i dati KML

Panoramica

Questo tutorial mostra come visualizzare le informazioni di un file KML in una mappa e in una barra laterale di Google. Per ulteriori informazioni sull'utilizzo dei file KML nelle mappe, leggi la guida ai livelli KML. Prova a fare clic su un indicatore nella mappa qui sotto per visualizzare i dati nella barra laterale.

La sezione seguente mostra l'intero codice necessario per creare la mappa e la barra laterale.

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  kmlLayer.addListener('click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
 
<div id="map"></div>
<div id="capture"></div>
 
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
 
<!-- Replace the value of the key parameter with your own API key. -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Fai una prova

Puoi sperimentare con questo codice in JSFiddle facendo clic sull'icona <> nell'angolo in alto a destra della finestra del codice.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Per iniziare

Queste sono le fasi per creare la mappa e la barra laterale per questo tutorial:

  1. Configurare il file KML
  2. Visualizzazione di KMLlayer
  3. Visualizzare i dati nella barra laterale

Configurare il file KML per l'importazione

Il file KML deve essere conforme allo standard KML. Per maggiori dettagli su questo standard, consulta il sito web del Open Geospatial Consortium. La documentazione KML di Google descrive anche il linguaggio e offre una documentazione di riferimento e concettuale per gli sviluppatori.

Se stai imparando e non hai un file KML, puoi:

  • Per questo tutorial utilizza il seguente file KML:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Trovare un file KML sul web. Puoi utilizzare l'operatore di ricerca filetype di Google.

    Sostituisci qualsiasi termine di ricerca con velodromes o ometti il termine del tutto per trovare tutti i file KML.

Se crei il file, il codice in questo esempio presuppone che:

  • Hai ospitato pubblicamente il file su internet. Questo è un requisito per tutte le applicazioni che caricano KML in un KMLLayer, in modo che i server di Google possano trovare e recuperare i contenuti per visualizzarli sulla mappa.
  • Il file non si trova su una pagina protetta da password.
  • Le tue funzionalità hanno contenuti della finestra informativa. Puoi includere questi contenuti in un elemento description o includerli utilizzando un elemento ExtendedData e la sostituzione delle entità (continua a leggere per saperne di più). Entrambi sono accessibili come proprietà infoWindowHtml della funzionalità.

Elementi ExtendedData

Il file KML di questo tutorial include le informazioni sulle funzionalità in un elemento ExtendedData. Per inserire queste informazioni nella descrizione della funzionalità, utilizza la sostituzione delle entità, che è essenzialmente una variabile nel tag BalloonStyle.

La tabella seguente spiega il codice per questa sezione.

Codice e descrizione 
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>
Il file KML ha un singolo elemento Style applicato a tutti i segnaposto.
Questo elemento Style assegna un valore di #[video] all'elemento di testo di BalloonStyle.
Il formato $[x] indica al parser KML di cercare un elemento Data denominato video e di utilizzarlo come testo del fumetto.		 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>
Ogni Placemark contiene un elemento ExtendedData, che contiene l'elemento Data. Tieni presente che ogni Placemark ha un singolo elemento Data con un attributo name di video.
Il file per questo tutorial utilizza il video di YouTube incorporato come valore del testo del fumetto di ogni segnaposto.

Per saperne di più sulla sostituzione delle entità, consulta il capitolo Aggiunta di dati personalizzati della documentazione KML.

Visualizzare il livello KML

Inizializzazione della mappa

Questa tabella spiega il codice per questa sezione.

Codice e descrizione 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}
Per visualizzare KML su una mappa, devi prima creare la mappa.
Questo codice crea un nuovo oggetto Google Map, indica dove centrarlo e ingrandirlo e lo associa a div.
Per saperne di più sulle nozioni di base per la creazione di una mappa di Google, leggi il tutorial Aggiungere una mappa di Google al tuo sito web.

Creazione di KMLLayer

Questa tabella spiega il codice che crea un KMLLayer.

Codice e descrizione 
var kmlLayer = new google.maps.KmlLayer();
Crea un nuovo oggetto KMLLayer per visualizzare il file KML.		 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});
Il costruttore KMLLayer imposta l'URL del file KML. Definisce inoltre le proprietà dell'oggetto KMLLayer che svolgono le seguenti funzioni:
  • Indica al livello di non visualizzare una finestra informativa quando viene selezionato.
  • Indica alla mappa di centrare e ingrandire il riquadro di selezione dei contenuti del livello.
  • Imposta la mappa sull'oggetto Map creato in precedenza.
La guida di riferimento dell'API Maps JavaScript elenca tutte le opzioni disponibili per questo livello.
Carica il file HTML per visualizzare i contenuti del file KML come livello sopra la mappa di base. Tuttavia, se fai clic su una funzionalità, non viene ancora eseguita alcuna azione.

Visualizzazione dei dati nella barra laterale

Questa sezione spiega le impostazioni che mostrano i contenuti della finestra informativa nella barra laterale quando fai clic su una funzionalità della mappa. A questo scopo:

  • In attesa di un evento di clic su una delle funzionalità di KMLLayer.
  • Recupero dei dati della funzionalità su cui è stato fatto clic.
  • Scrivere questi dati nella barra laterale.

Aggiunta di un listener di eventi

Google Maps fornisce una funzione per ascoltare e rispondere agli eventi utente sulla mappa, come clic o pressioni di tasti della tastiera. Aggiunge un listener per questi eventi click.

La tabella seguente spiega il codice per questa sezione.

Codice e descrizione 
kmlLayer.addListener('click', function(event) {});
Il listener di eventi kmlLayer.addListener si concentra su:
  • Il tipo di evento da tenere in considerazione. In questo tutorial, si tratta dell'evento click.
  • Una funzione da chiamare quando si verifica l'evento.
Puoi scoprire di più sugli eventi nella Guida per gli sviluppatori.

Scrittura dei dati delle funzionalità KML nella barra laterale

A questo punto del tutorial, hai acquisito gli eventi di clic sulle funzionalità del livello. Ora puoi impostare l'applicazione in modo che scriva i dati della funzionalità e i contenuti della finestra informativa nella barra laterale.

La tabella seguente spiega il codice per questa sezione.

Codice e descrizione 
var content = event.featureData.infoWindowHtml;
Scrive il contenuto della finestra informativa in una variabile. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
Identifica l'elemento div in cui scrivere e sostituisce il codice HTML con i contenuti della funzionalità. 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});
Queste righe di codice diventano la funzione all'interno del costruttore addListener.

Ora, ogni volta che fai clic su una funzionalità KML sulla mappa, la barra laterale si aggiorna per visualizzare i contenuti della finestra informativa.

Ulteriori informazioni

Scopri di più sull'utilizzo dei file KML.