Google Map in Webseite einbinden mit Google Maps API

Google APIs sind eine spannende Sache. Dank der Google Maps API könnt ihr eine Google Map in jede beliebige Webseite einbauen.

Ziel: Eine einfache Google Map, die im Zentrum unser gewünschtes Objekt zeigt.
Hier das Beispiel und der Code dazu:
html4strict“ line=“1″>






Okay gehen wir das mal durch:

Zeile 3 ist wichtig. Wie in hier beschrieben braucht ihr für jede Domain, auf der Google Maps laufen soll, einen persönlichen Key. Der ist in 1 Minute erstellt, geht einfach auf diese Seite und folgt den Anweisungen.
So, den Key habt ihr nun. Zieht euch den Beispielcode von mir oder aus den Google Map Basics und ersetzt den Key mit eurem.

Zeile 8 erzeugt ein neues Objekt „map“. Dieses Objekt kommuniziert direkt mit dem Element „map_canvas“, das ist das DIV in Zeile 7 im Body des HTML Dokuments. Diesem DIV gebt ihr die gewünschte Map-Größe.

Zeile 9 stellt den gewünschten Map Typ ein.

Zeile 10,

map.setCenter(new GLatLng(52.52497,13.37959),15);

.
map.setCenter( ) setzt das Zentrum des map Objekts auf eine bestimmte Koordinate. Diese Koordinate muss vom Typ GLatLng sein. Wie ihr diese Koordinate von eurem Wunschziel herausbekommen könnt, könnt ihr neuerdings recht leicht dank maps.google.de Labs herausfinden. Susann von Tipps-Archiv erklärt kurz und verständlich, wie das geht.
Ihr habt dann etwas in der Art 52.52497,13.37959 ergattert. Fehlt ja nur noch die 15 am Ende. Das ist die Zoomstufe der Map, wobei ihr einen Wert von 0 (Weltansicht) bis 20 (die Katze des Nachbarn) wählen könnt.

Dann fehlt ja nur noch, dass ihr mit dem Laden des HTML Dokuments dank des onload Attributs in Zeile 16 die initialize Funktion startet, die das ganze Map Gedöns enthält.

Zufälliger Artikel:  Clever Amazon shoppen mit Keepa.com - Preisüberwachung und mehr

So einfach ist es 🙂

Achja, macht euch den Stress bloß nicht, wenn ihr nur mal ne Map in euren Blog einbinden wollt oder so. Für so einfache Geschichten geht folgender Weg:
geht zu Google Maps, stellt die Karte so ein, wie ihr sie verteilen wollt und klickt dann oben rechts in der Karte auf „Link“. Dort findet ihr den HTML Code zum Einbetten.

Wer das allerdings HTML valide, flexibler und professioneller machen möchte, oben ist der Weg 😉

Morgen bauen wir das Beispiel noch weiter aus, Stay Tuned! Schönes Wochenende Leute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.