Die große Datenkracke Google ist nicht nur wegen ihrer uminösen Datensammelwut so gefährlich, sondern weil Google so viele nützliche Dinge anbietet, die einen dazu bringen, sich an der Datensammelei zu beteiligen. Mich hat für ein Webseitenprojekt der Google Map Virus infiziert und, um die Krankheit weiterzugeben, gibt es hier jetzt auch ein kleines Tutorial. Google Map lässt sich quasi in jeder Webseite einbetten, schöne neue Ajax und Web 2.0 Welt. In den folgenden Tagen werde ich in loser Folge ein paar Tricks und Tipps rundum Google Maps veröffentlichen. Dieser erste Beitrag beschäftigt sich vor allem mit der Implementierung von Google Maps in einem Blogger Blog.
Als ersten Schritt benötigt man einen Account auf blogger.com oder einen anderen Webspace, der die Editierung des HTML Header erlaubt. Eine Einführung in die Anlegung eines Blogs auf Blogger findet sich bei Greasepaint Mustache.
Im zweiten Schritt registriert man sich bei Google Maps und erhält einen Schlüssel, um auf die Javascript API von Google Maps zugreifen zu können. Bei der Registrierung muß die URL der Webseite angegeben werden. In dem Fall dieses Blogs ist dies
http://enzo-suppenkueche.blogspot.com/. Nach erfolgreicher Registrierung wird man zu einer Seite mit dem erforderlichen Schlüssel und ersten Implementierungshinweisen weitergeleitet. Der Schlüssel funktioniert nur für die angegebene Adresse. Der Schlüssel in folgenden Beispielen muß also durch den eigenen ersetzt werden.
Der Schlüssel wird im HTML Header der jeweiligen Webseite angegeben. Dazu fügt man in den Header Bereich die Zeile
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAASZ3N6clfNgwdCS_5dY9qvRRU-RQhKSfS4adaOne2TJRLmIboSRQtuI6jOlEU5REGqSarJpmOJ8jDKQ' type='text/javascript'/>Der Schlüssel ist der Buchstabensalat hinter
key= und muß für die individuelle Webseite angepasst werden. Auf Blogger.com kann man die HTML Vorlage unter dem Verweis "HTML bearbeiten" der Vorlageneinstellung editieren. Die ersten Zeilen der HTML Vorlage sollten dann etwa so aussehen:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAASZ3N6clfNgwdCS_5dY9qvRRU-RQhKSfS4adaOne2TJRLmIboSRQtuI6jOlEU5REGqSarJpmOJ8jDKQ'
type='text/javascript'/>
Jetzt kann die Google Map API genutzt werden. Um eine Karte im Blog einzufügen, wird zusätlicher Javascript Code im Header nach der Schlüsselabfrage eingefügt. Der folgende Code ermöglicht die Darstellung eine Karte mit den Koordinaten 37.4419°, -122.1419° und der Zoomstufe 13 in einer HTML Divion mit der ID "map".
<script type='text/javascript'>
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
Der Code implementiert eine Funktion load(), die ein Google Map Objekt kreiert und den Kartenmittelpunkt auf die gewünschten Koordinaten und Zoomstufe setzt. Die einzelnen Bestandteile werden im nächsten Teil dieses Tutorials näher beschrieben. Die Funktion load() muß zusammen mit der Google API Methode GUnload() im HTML Body Tag der Webseite eingefügt werden:
<body onload='load()' onunload='GUnload()'>Als letzten Schritt dieses Tutorials erstellt man einen Post im Blog der die Map Division enthält bzw fügt die Division im HTML Code der Webseite ein:
<div id="map" style="width: 400px; height: 300px;"></div>Mit dem Style Attribute des Division Tag werden die Breite und Höhe der Karte angegeben. Sollen mehrere Karten auf einer Webseite/Blog erstellt werden, müssen mehrere Google Map Objekte geschaffen werden, die auf verschiedene Division IDs verweisen. Hierzu werde ich in einem späteren Beitrag näher eingehen.
Das Ergebnis sollte dann so aussehen:
3 Kommentare:
Danke für das Tutorial. Sehr nützlich.
Dann mal ran mit Teil II :)
Erst einmal muß ich das Deutsch des Artikel auf Vordermann bringen. Der Post war in der ersten Version auch mehr der Versuch, ob das auch so klappt.
Ich sehe keine Karte!
Kommentar veröffentlichen