Google Maps als Standortkarte in Typo3 integrieren

Google Maps kann kostenlos in die eigene Webseite eingebunden werden, um beispielsweise auf der Kontaktseite eine Anfahrtskarte einzubinden oder in einer Kartenansicht die Standorte von Filialen darzustellen. Diese Anleitung beschreibt die Einbindung einer Karte mit einer Markierung für den eigenen Standort in Typo3.

Google Maps API Key beantragen

Um Google Maps nutzen auf der eigenen Seite nutzen zu können, muss zunächst ein kostenloser API Key beantragt werden. Jede Domain, auf der eine Karte eingebunden werden soll benötigt einen separaten API Key.
Gehen Sie dazu auf die Google Maps API Signup Seite und tragen Sie am Ende der Seite die Domain ein, auf der die Karte eingebunden werden soll:

Zur Erstellung des API Keys benötigen Sie einen Google Account. Sollten sie bereits Google Adwords, Google Analytics, Gmail oder ähnliche Dienste von Google nutzen, so melden Sie sich einfach mit den Zugangsdaten für den jeweiligen Dienst an. Andernfalls erstellen Sie sich einen neuen Account. Nach dem Login erhalten Sie Ihren API Key:

Koordinaten des eigenen Standorts ermitteln

Als nächstes benötigen Sie den Längen- und Breitengrad Ihres Standorts. Dieser dient später der Zentrierung der Karte. Dazu suchen Sie am besten bei Google Maps nach Ihrer Adresse. Google Maps zentriert dann die Karte auf Ihren Standort. In der rechten oberen Ecke der seite finden Sie den Link URL zu dieser Seite:

Der Email-Link enthält die gesuchten Koordinaten – im Beispiel ist das 52.488765,13.454776.

Einbindung in eine Seite in Typo3

Google Maps benötigt eine Javascript-Funktion für die Initialisierung der Karte beim Laden der Seite. Dazu muss im Kopf der Seite ein Script von der Google-Seite geladen werden, ein OnLoad-Event im Body-Tag der Seite ergänzt werden sowie in der Seite selbst ein DIV-Tag platziert werden, in dem später die Karte geladen wird.

OnLoad-Funktion anlegen

Gehen Sie zunächst in das Modul Dateiliste in der Administration von Typo3 und legen Sie eine neue Javascript-Datei an. Wir nennen die Datei google_maps.js und legen Sie im Ordner template an:

Als Inhalt der Datei fügen sie die folgende Javascript-Funktion ein, die später als OnLoad-Event dienen wird:

function load() {
  if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("map"));
  
  map.enableScrollWheelZoom();
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(52.488765,13.454776), 13);
    
  // Place a marker in the center of the map and open the info window
  // automatically
  var marker = new GMarker(map.getCenter());
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("<b>Firmenname</b><br/>Straße 123<br/>12345 Stadt");
  });
  map.addOverlay(marker);
  marker.openInfoWindowHtml("<b>Firmenname</b><br/>Straße 123<br/>12345 Stadt");
      
  }
}

map.setCenter(new  GLatLng(52.488765,13.454776), 13);

In dieser Zeile tragen Sie die Koordinaten Ihres Standorts ein, die Sie vorher in Google Maps ermittelt haben. Mit dem dritten Wert 13 können Sie ggf. den Zoom-Faktor der Karte anpassen.

Das Beispiel enthält in der Karte Markierungen für Ihren Standort, die mit einer Sprechblase versehen sind, in der beispielsweise Ihre Adresse stehen kann. Den Inhalt der Sprechblase passen Sie mit folgenden Zeilen an:

marker.openInfoWindowHtml("<b>Firmenname</b>
Straße 123
12345 Stadt");

Javascript-Codes auf der Seite einbinden

Nun muss auf der Seite, auf der die Karte angezeigt werden soll der Javascript-Code eingebunden werden. Nachdem dieser nicht auf jeder Seite benötigt wird, lässt sich das am besten mit einem Extension Template erreichen. Wechseln Sie dazu in der Administration von Typo3 links in das Modul Template und wählen Sie dann im Seitenbaum die Seite aus, auf der die Karte eingebunden werden soll. In dem Drop-Down auf der rechten Seite wählen Sie die Funktion Info/Modify:

Klicken Sie nun auf Click here to create an extension template. Und bestätigen Sie die Nachfrage. Im folgenden Dialog wählen Sie den kleinen Stift in der Zeile Setup:

page.bodyTag = <body onload="load();" onunload="GUnload()">
 
page.headerData.101 = TEXT
page.headerData.101.value (
<script type="text/javascript" src="fileadmin/template/google_maps.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key= ABQIAAAAsGtGdLij6bdofF6hsZiJ5hRGp4oNzpma4FFwJ2MrY7Sr_17r_BSHYyJLCVF0QHY53mbu98LdKmbU3g" type="text/javascript"></script>
)

In der Javascript-Zeile ist der Google Maps-API Key enthalten. Tauschen Sie diesen gegen den API Key aus, den Sie vorher erstellt haben und speichern Sie das Extension Template.

Karte auf der Seite platzieren

Nun muss lediglich auf der gewünschten Seite noch ein Inhaltselement angelegt werden, in dem die Karte angezeigt werden kann. Wechseln Sie dazu nun links im Menü in das Modul Seite und legen Sie einen neuen Seiteninhalt an:

Geben Sie dem Element im Reiter Allgemein einen Namen und wechseln Sie dann in den Reiter HTML. Hier fügen Sie folgenden HTML-Code ein:

<div id="map" style="width: 420px; height: 420px"></div>

Mit den CSS-Direktiven zur Breite und Höhe des DIV-Elements können Sie die Größe der Karte festlegen. Anschließend speichern Sie das Inhaltselement.

Erster Test

Wenn Sie die Seite nun im Browser aufrufen, sollte Sie eine Instanz von Google Maps mit einer Markierung für Ihren Standort enthalten: