Google Earth Plugin: visualizzare KML su una pagina web HTML
Pubblicato da Davide, Aggiornato domenica 16 agosto 2009 4 Commenti »
Google Earth è diventato ormai uno strumento dalle mille potenzialità: esplorazione degli oceani, fotografie, edifici e terreni in 3D, visione dei luoghi nel tempo, registrazione dello schermo, sono solo alcune delle meraviglie del prodotto.
La possibilità di utilizzare file KML generati da altri è un’altra delle cose che rendono Google Earth uno strumento eccezionale per far visualizzare percorsi, itinerari, foto dei luoghi e quant’altro. Le informazioni geolocalizzate permettono di dare al fruitore un contributo unico: vedere i posti vale molto di più che descriverli.
Ebbene, da qualche tempo è disponibile un plugin che permette di portare Google Earth direttamente sulle pagine web, grazie alle Google Earth API. E’ infatti possibile inserire in una pagina web una finestra che visualizza il famoso mondo 3D, caricando un file KML.
Nel futuro non saremo più legati al 2D delle famosissime mappe di Google, ma potremo creare mashup direttamente in 3D. Gli esempi di codice sono davvero vasti e ben documentati.
Ecco il codice dell’esempio sotto, commentato nel javascript che carica il plugin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT">
<head>
<title>Esempio Plugin Google Earth con file KML</title>
<script src="http://www.google.com/jsapi?key=LaTuaAPIKey"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
//inizializza la mappa prendendo come riferimento l'ID del div che la contiene: map3d
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// aggiunge i controlli di navigazione
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// aggiunge alcuni livelli: confini e strade
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
// codice per caricare e far visualizzare il file KML
function finished(object) {
if (!object) {
// Gestione degli errori per prevenire i deadlock di alcuni browsers
setTimeout(function() {
alert('Bad or null KML.');
}, 0);
return;
}
ge.getFeatures().appendChild(object);
// imposta latitudine, longitudine e zoom
var la = ge.createLookAt('');
la.set(44.258300, 10.411550, 25, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 70, 400);
ge.getView().setAbstractView(la);
}
// carica il file KML
var url = 'http://www.diplod.it/wp-content/uploads/2009/08/AlbaCusna.kml';
google.earth.fetchKml(ge, url, finished);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="width: 500px; height: 380px;"></div>
</body>
</html>
Ovviamente per far andare il tutto è necessario ottenere una API Key, fornita gratuitamente da Google per il proprio dominio.
Il giochino è davvero meraviglioso, ecco come appare il tutto:
Se vi interessa sapere come ho fatto a generare questo file KML, provate a sbirciare qui: con un cellulare Nokia potrebbe aprirsi un altro mondo.. ;)
Varie info
Articolo pubblicato domenica 16 agosto 2009 alle 19:55
Segnala questo articolo.. e sentiti utile!
4 Commenti »
Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.
Lascia il tuo commento
1
Matteo - Pubblicato il 16 08 2009 alle 21:36
Sembra effettivamente figo, ma come spesso accade nessuno ha pensato all’esistenza di Linux: http://friendfeed.com/mbg/7b52090d/sara-pure-un-giochino-meraviglioso-peccato-che
2
Davide - Pubblicato il 16 08 2009 alle 23:51
E’ uno dei problemi di Google.. Anche Chrome, così come Earth, non è disponibile per Linux. Il motivo di questa scelta davvero non si capisce, o meglio: si capisce ma non è nello stile di Google.
3
Ernyblog » Metti google earth nel tuo sito. - Pubblicato il 24 08 2009 alle 18:02
[...] che è possibile ottenere il tutto grazie a questo javascript che ho preso direttamente dal blog Diplod e che può essere facilmente copiato e incollato in qualsiasi pagina del nostro [...]
4
Giov - Pubblicato il 13 06 2010 alle 11:47
mi dite in maniera abbastanza “agricola” come si fa a generare il codice da inserire in una pagina web avendo a disposizione un file KML?!
Io praticamente ce l’ho.. ho richiesto la chiave e poi?!??!! che devo fare?! io sto realizzando una semplice pagina html in cui voglio inserire un percorso ma non so dove devo cliccare e cosa per inserire il mio file e vederlo con google earth!
mi dite i vari passaggi o i link da cliccare?!?
grazie :(