Zum Hauptinhalt springen

Integration Tag - Google Maps

Google Maps - Karte erzeugen​

» Google Maps Generator in neuem Fenster öffnen

Um dir die Einbindung einer Google Map leichter zu machen, haben wir ein Tool erstellt, das den benötigten Code erzeugt und auch Pins mit den Positionen deiner Filialen, etc. inklusive Informationsfenster in die Karte einbinden kann.

screenshot

hinweis

Die Konfigurationen, die du in dem Tool vornimmst, werden in deinem Browser (im Local Storage) dauerhaft gespeichert, damit du auch bei einem Neuladen keine Informationen verlierst.

Allgemeine Informationen festlegen​

Google API Key​

Dieser Key muss von Google angefordert werden, damit du eine Karte auf deiner Website anzeigen kannst.

Max Zoom​

Wenn du nur einen Pin anlegst, so wird dieser Zoomlevel gesetzt. Wenn du mehrere Pins anlegst, so wird die Karte automatisch so angezeigt, dass alle Pins optimal sichtbar sind.

DIV ID​

Die ID des in die Website eingebetteten DIV-Tags in dem die Karte dann angezeigt wird.

Neue Pins anlegen​

Mittels "Neuer Pin" kannst du einen neuen Marker auf der Karte platzieren. Dazu gibst du die Informationen in der Detailmaske ein:

screenshot

hinweis

Die Position des Pins wird anhand der Adresse ermittelt

Pin - Positionen aktualisieren​

Um aus der eingegebenen Adresse die Position auf der Karte zu generieren, drücke diesen Button. Es werden dann für alle Pins die korrekten Positionen ermittelt und in der Tabelle angezeigt.

Nur Pins mit einer gültigen Pin-Position werden dann auch auf der Karte angezeigt:

screenshot

Sourcecode generieren​

Es öffnet sich ein Fenster mit dem generierten Sourcecode, den du direkt in deine Website oder in ein Integration Tag einbinden kannst. Die Anleitung für das Integration Tag folgt direkt im Anschluss.

Vorschau anzeigen​

Es wird eine interaktive Vorschau der Karte angezeigt, wie sie dann auch auf der Website erscheint.

Als Integration Tag einbinden​

Um die Karte über WebCare mittels 2-Click einzubinden, haben wir hier eine kurze Anleitung erstellt.

Zunächst konfigurierst du die Karte so, dass in der Vorschau alles korrekt angezeigt wird.

Konfiguration in WebCare​

Dann wechselst du zu WebCare und dort in den Consent Banner / Tag Manager. Lege ein neues Integration Tag an.

Konfiguriere dann das Tag wie folgt:

screenshot

  • In der Platzhalter ID gibst du denselben Wert ein, wie bei der DIV ID (in dem Fall "dr_gmap")
  • Unter HTML Code fügst du den Code ein, den du unter "Sourcecode generieren" erhalten hast.
  • Der Modus muss auf "Separat laden" eingestellt sein
  • Beim Platzhalter Design solltest du "Landkarte" wählen.

Speicher das Tag, gib es frei und veröffentliche WebCare.

Konfiguration in deiner Website​

Fügen das leere DIV-Tag dort ein, wo die Landkarte erscheinen soll, also zum Beispiel so:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Integration Demo</title>
</head>
<body>

...
<div style="width: 500px; height: 500px;" id="dr_gmap"></div>
...

</body>
</html>

Die IDs von WebCare haben wir hier weggelassen.

hinweis

Bitte beachte, dass auf der Seite mit dem DIV-Tag auch der Consent Banner integriert sein muss!

Nun sollte die Karte samt 2-Click Einwilligung korrekt angezeigt werden.