Beliebte Posts

Dienstag, 22. Juli 2008

Google Earth Plugin

Google hat mit dem Plugin eine wirklich gute Lösung erreicht, um die herkömmlichen Karten abzulösen. Ich habe heute nur kurz damit experimentiert, aber ohne Vorwissen innerhalb von einer Stunden (und unter Nutzung einiger Webseiten, u.a. Google Earth API) meine erste Integration hinbekommen. Aber die Installation und Einrichtung ist eindach. Gut, ist nur die Erde mit einer Rundreise von mir (wobei immerhin schon die Rotation an den Ort klappt). Andere Features (Straßen, Berge, Namen, Bilder) sind noch nicht angeschaltet. Und ich möchte eine Liste einbauen mit anderen Touren, die ich gemacht habe oder machen werde. Aber dazu später, gibt andere Dinge zu tun.
WICHTIG: Für das Funktionieren des Plugins sind einige Sachen zu beachten:
  1. Es muss Windows sein
  2. Das Plug-In muss installiert sein. Hier ist der Download-Link

Dennoch hier kurz eine Anleitung, wenn jemand das ganze in seinem Blog haben möchte. Für blogger (bzw. blogspot) gibt es eine schnelle (und "dirty") Variante. Feintunning kommt dann auch ggf. an einem anderen Tag.

1. Schritt: Karte einbinden. Ich habe mich für ein Seitenelement entscheiden. In Layout entsprechend einfügen, Typ ist HTML. Dort dann den folgenden Code einfügen:

<div id="map3d_container" style="border: 1px solid silver; height: 300px; width: 300px;">
<div id="map3d" style="height: 100%;"/>
</div>

Dann im Layout-Bereich HTML bearbeiten auswählen und folgenden Code direkt vor das Element einfügen. Zwei Angaben sind auszutauschen. Zum einen der key in der zweiten Zeile. Hier unter Google Maps API Sign up einen eigenen Key unter Verwendung der URL, auf der man Google Earth verwenden möchte, bentragen und einfügen (KEY_FROM_GOOGLE).


Zweite Änderung wäre der Name der kmz (bzw. KML, die ungepackte Version), der bei var url angegeben werden muss (URL_KMZ). Bei Bedarf kann man unten die Variablen lat, long, und tilt, altitude noch anpassen


<script src="http://www.google.com/jsapi?key=KEY_FROM_GOOGLE"><script>
google.load("earth", "1");

var ge = null;
function init() {
google.earth.createInstance("map3d", initCB, failureCB); }

function initCB(object) {
var url = 'URL_KMZ';
ge = object;
ge.getWindow().setVisibility(true);
google.earth.fetchKml(ge, url, function(kmlObject) {
ge.getFeatures().appendChild(kmlObject);});
ge.getOptions().setStatusBarVisibility(true);

var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
var lat = -25.110272;
var long = 127-.141306;
var tilt = 45;
var altitude = 3280839;

lookAt.set(lat, long, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, tilt, altitude);
ge.getView().setAbstractView(lookAt);
}

function failureCB(message) {
alert("Plugin load failed: " + message);
}
</script>


Letzter Schritt ist die Veränderung des body-tags, womit das ganze schon abgeschlossen wäre:


<body id='body' onload='init()>



Genial oder?

Keine Kommentare: