Aktuelles / BlogAktuelles / Blog

Neueste Meldungen, Hintergrundinfos, HOW-TOs

...und vieles mehr nur hier im Blog

Weitere Informationen zu Contentpapst Weitere Informationen zum CP::Shop

Neueste Beiträge


Entwickler-Blog: Produktinfos & Updates

<< zum vorherigen Eintragzum nächsten Eintrag >>

Eigene Karten auf Ihrer Webseite anzeigen mit der Google Maps API (Sa, 03.09.2011)

Mit dem neuen Container für Google Maps können ab sofort individuelle Karten sehr einfach auf der Webseite eingebunden werden. Mit einem einzeiligen Aufruf können Sie Ihren Besuchern z.B. den Standort Ihres Unternehmens anzeigen oder in einem Veranstaltungsverzeichnis die Standorte der einzelnen Veranstaltungsorte. Die Unterstützung geht dabei jedoch weit über eine einfache Lokalisation eines Ortes hinaus. Der Container bietet je nach Bedarf eine Unterstützung auf unterschiedlichen Wegen an:

Integration abhängig vom jeweiligen Anwendungszweck

Welche Variante der Integration gewählt wird, ist abhängig vom jeweiligen Anwendungszweck und Ihren Anforderungen hinsichtlich Funktionsumfang, Interaktivität und Performance:

  • Einfache Iframe-Integration: Integration von Google Maps über einen Iframe, z.T. andere Funktionalität als bei der API-Integration.
  • URL zum Aufruf bei Google Maps: Liefert die URL zu Google Maps zurück, mit der identischen Darstellung der Karte wie bei der Integration als Iframe.
  • Statische Version der Karte: Ausgabe einer statischen Version der Karte als normales Bild über die Google Static Maps API, bietet sehr gute Performance aber eingeschränkte Funktionalität.
  • Komplexere API-Integration: Umfangreichster Funktionsumfang mit direkter Integration der Karte über die Google Maps Javascript API.

Der benötigte Containeraufruf für die Integration einer Karte kann im Administrationsbereich desCMS Contentpapst und der Shop-Software CP::Shop direkt über den "{cp:tag}-Wizard" zusammengeklickt werden (über das Zauberstab-Symbol oben rechts):

Eigene Karten über die Google Maps API einbauen

Dabei kann der "Karten-Typ" (normale Straßenkarte, Satellit, Gelände, Google Earth) festgelegt werden, es ist eine direkte Anzeige von Straßenzügen über Google Streetview möglich (z.B. Darstellung Ihres Ladeneinganges), die Karte kann mit verschiedenen Layern ergänzt werden (aktueller Verkehr, Fahrradwege, Fotos, ...) und es können zahlreiche weitere Angaben für die Darstellung getroffen werden (Zoom-Level, Abmaße, Icons etc.). Der generierte Containeraufruf kann anschließend systemweit z.B. in Vorlagen platziert werden und es wird dann bei der Ausführung direkt die konfigurierte Karte angezeigt.

Als Adresse kann dabei eine konkrete Anschrift angegeben werden, eine geografische Position ("40.712778,-74.005833" für New York City) oder jede andere Abfrage, die in Google Maps ein gültiges, eindeutiges Ergebnis ausgibt.

Beispiele für den Aufruf per Container

Einfacher Aufruf als Iframe für einen bestimmten Ort mit Zoom und Abmaßen:

{cp:container module="options" type="google_maps" location="Potsdamer Platz, Berlin" integration="iframe" width="100%" height="400" zoom="16"}


Aufruf als statische Karte mit Satellitenbild:

{cp:container module="options" type="google_maps" location="Potsdamer Platz, Berlin" integration="static" show_maptype="satellite" width="742" height="400" zoom="16"}


Aufruf über die Google Maps API mit Darstellung des aktuellen Straßenverkehrs:

{cp:container module="options" type="google_maps" location="Potsdamer Platz, Berlin" integration="api" width="100%" height="400" zoom="16" show_traffic="yes"}


Gleicher Aufruf mit eigenem Icon, weiteren Informationen beim Klick auf das Icon und Fahrradwegen:

{cp:container module="options" type="google_maps" location="Potsdamer Platz, Berlin" integration="api" show_infowindow="yes" infowindow_text="<strong>Max Mustermann Co.KG</strong><br />Hier gibt es die besten Sandwiches der Stadt." zoom="16" width="100%" height="400" marker_icon="{cp:path}images/icon.png" show_layer_bike="yes"}


Ausgabe einer URL für den Aufruf der Karte in einem neuen Fenster mit zusätzlichen Layern:

<a href="{cp:container module="options" type="google_maps" location="Potsdamer Platz, Berlin" integration="url" show_traffic="yes" show_layer_weather="yes" show_layer_youtube="yes"}" target="_blank">bei Google Maps anzeigen</a>

bei Google Maps anzeigen


Aufruf eines Ortes mit Google Streetview:

{cp:container module="options" type="google_maps" location="52.516254,13.376221" integration="api" width="742" height="400" show_streetview="yes" streetview_heading="90"}


Alternativer Aufruf per PHP

Alternativ zu den oben sichtbaren Containeraufrufen über {cp:tags} können diese Container auch direkt per PHP geladen werden. Dies ist sinnvoll, wenn z.B. umfangreichere Informationen im Infofenster eines Icons angezeigt werden sollen oder eine Erweiterung der API-Integration um eigenen Javascript-Code gewünscht ist:

Genau wie die weiteren standardmäßig von Contentpapst und CP::Shop bereitgestellten Container für u.a. Facebook, Twitter, Google +1, XING, YouTube und Zopim wird auch der Container für die Google Maps API stets auf dem neuesten Stand gehalten. Durch die Aktualisierung dieses Containers über das Updatetool können Sie somit sicherstellen, dass alle Karten auch auf sehr komplexen Webseiten stets funktionieren, ohne dass Sie sich selbst mit der Funktionsweise der Google Maps API beschäftigen und Code auf den verschiedensten Seiten Ihrer Webseite laufend aktuell halten müssen.

Für Kunden wird der neue Container ab sofort über das Updatetool kostenfrei bereitgestellt. Hinzugefügt zur Installation muss dafür die Datei "/modules/options/container/google_maps.php".

Benötigen Sie eine über den standardmäßigen Funktionsumfang des Containers hinausgehende Anbindung an Google Maps? Z.B. Suchfunktionen innerhalb der Karte, die Ausgabe einer Anfahrt zu Ihrem Unternehmen etc.? Sprechen Sie mit uns, im Rahmen unseres Dienstleistungsangebotes finden wir auch für Sie die passende Lösung.

Diese Funktionen sind Bestandteil der Version 2011.2.09.03 und können von Nutzern von Contentpapst / CP::Shop / Contentpapst-Bundle innerhalb des Updatezeitraumes kostenlos über das Updatetool bezogen werden (benötigen Sie eine Updateverlängerung?).

RSS-Feed abonnieren RSS-Feed abonnieren