Integration von Google Maps in Ihre Typo3 Website
Google Maps IntegrationMittlerweile hat sich Google Maps gegen alle Konkurrenten durchgesetzt. Der einfache Grund: Google Maps ist kostenlos, eine Integration in Ihre Website ist nicht nur ohne Lizenzkosten möglich sondern von Google auch explizit gewünscht. Sie können also nun eine Google Karte in Ihre Seiten integrieren, Ihre Logos in die Karte integrieren, Routenplanung anbieten und Standorte darstellen.
Ich helfe Ihnen gerne weiter, wenn Sie sich nicht mit den technischen Details der Realisierung beschäftigen möchten.
Integration von Google Maps in Typo3
Anmeldung für die Google Maps API
Zuerst müssen Sie Ihre Domain auf der Google Maps API - Seite anmelden (in Englisch). Dies geschieht problemlos, Sie müssen lediglich den Namen Ihrer Domain angeben und erhalten anschließend einen API-Lizensschlüssel sowie ein Script, dessen Integration eine erste Karte in Ihrer Seite darstellt.
Hinzufügen des Scripts in den Header des Typo3-Templates
Das Hinzufügen des Scripts erfolgt durch die Eingabe des folgenden Codes in das Typo3 Template Setup:
page.headerData.10 = TEXT
page.header.Data.10.value = [...]
page.headerData.10.value = [...]
Hinzufügen des Scripts in den Body des Typo3-Templates
Nun muss lediglich noch beim Laden des Bodys der Seite das Script auch aufgerufen werden. Hierzu muss der Body-Tag verändert werden. Dies Geschieht über folgende Anweisung im Typo3 Template Setup:
page.bodyTag = <body onload="load()" onunload="GUnload()">
Hinzufügen der Karte in den Typo3 Content
Legen Sie nun im Typo3-Backend ein Inhaltselement mit reinem HTML-Content an und fügen dort folgendes HTML ein:
<div id="map"></div>
Die Größe des Containers und seinen rahmen können Sie dann wie gewohnt in CSS formatieren.
Weiterführende Fragen
Gerne Berate ich Sie über die Integration von Google Maps in Ihre Internetseite. Wenden Sie sich einfach an mich oder schreiben Sie einen Kommentar.
Kommentare
Guten Tag,
mir ist ein kleiner fehler in ihrer Seite auf gefallen
Bei der Google Map ein bindung haben sie stehen
—————-
page.headerData.10 = TEXT
page.header.Data.10.value = [...]
——————————
in der zweiten Zeile ist aber ein Punkt zu viel
page.headerData.10.value = [...]
so ist es denke ich besser
Guten Nacht und danke für die ganzen Infos auf ihrer Seite
mfg
Alexander Reiß
Vielen Dank für die Info! Ich habe den Fehler umgehend behoben. Sie haben mit Ihrem Kommentar auch eindrucksvoll eine der größten Fehlerquellen in der Arbeit mit Typoscript aufgedeckt: Tippfehler 
11.09.2008