Technische Integration von Google Maps
Integration von Google Maps in Inserate-Layouts
Download und Bereitstellen der Dateien für das Inserate-Layout
Folgende ZIP-Datei enthält ein fertiges Beispiel eines Inserate-Layouts mit integrierter Google Maps.
- Google Maps Integration (.zip): Datei:InserateLayoutMitGoogleMap.zip
Hinweis:
- Für eine Integration nach Anleitung werden nur die Datei directions.js und die in der Anleitung aufgeführten Codesnippets benötigt.
- Weiter sind u.a. folgende HTML-Dateien enthalten: Blue_Carpet_4.htm und Blue_Carpet_4 -hardcoded.htm
- Blue_Carpet_4.htm enthält ein Beispiel, wo Adressdaten mittels Variablen extrahiert werden
- Blue_Carpet_4 -hardcoded.htm stellt ein weiteres Beispiel dar, wo die Adressdaten fix hinterlegt sind.
Bitte laden Sie die Dateien aus der ZIP-Datei in der Reihenfolge wie unten angegeben im entsprechenden Inserate-Layout in Umantis als Attachments hoch.
HTML 0 Blue_Carpet_4.htm Attachment:# 1 logo4.png 2 jqueryPlug.js 3 jquery.roundabout.js 4 bg.png 5 jolie.jpg 6 moore.jpg 7 roberts.jpg 8 directions.js 9 city.jpg
Bei der Erstellung des neuen Inserate-Layouts können nicht alle Attachments hochgeladen werden. Bitte speichern Sie und laden Sie die restlichen Anhänge danach in einem zweiten Durchgang hoch.
Konfigurieren der Google API
Google API Zugangsschlüssel registrieren
Für die Nutzung von Google Maps ist seit Juni 2018 ein API-Key notwendig. Dieser ist kostenpflichtig und wird vom Kunden direkt über Google erworben. Nutzen Sie Google Maps ohne gültigen API-Key, so werden diese mit geringer Auflösung ausgegeben und mit dem Wasserzeichen "nur für Entwicklungszwecke" versehen bzw. die Fehlermeldung: "Google Maps kann auf dieser Seite nicht richtig geladen werden" angezeigt.
Der Google API Key wird zur Identifizierung der Browser Anwendung benötigt und ist zwingend für die Integration von Google Maps. Google zählt alle Zugriffe auf die API und sperrt den Zugriff, sobald eine Gewisse Zugriffszahl erreicht ist. Es können weitere Zugriffe zugekauft werden, wenn die entsprechende Applikation 90 Tage in Folge die (von Google bestimmte) Grenze überschreitet.
Google API Zugangsschlüssel im Layout Verwenden
Folgender HTML-Ausschnitt kann als Vorlage für die Google Map Integration verwendet werden.
<!-- Google Maps Stuff--> <!-- Google API Key should be set! --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<GoogleAPIKey>sensor=false&libraries=places"></script> <script type="text/javascript" src="[document.attachement8]"></script>
Der Platzhalter <GoogleAPIKey> steht stellvertretend für den API Key, welcher von Google vergeben wurde. Mit der Variable [document.attachement8] wird auf die JavaScript-Datei (directions.js) verwiesen, welche für das korrekte Verhalten der Google Maps Integration zuständig ist.
Beispiel-Integration von Google Maps
Falls man den Google API Key in der Lösung hinterlegen möchte, kann dies beispielsweise über ein Benutzerdefiniertes Feld gemacht werden. Im folgenden HTML-Ausschnitt wird die Variable [Niederlassung.BenutzerdefText1] verwendet, um auf das entsprechende Feld in der Lösung zuzugreifen. Das Feld [Niederlassung.BenutzerdefText1] gehört zu den Niederlassungsinformationen.
<!-- Google Maps Stuff--> <!-- Google API Key should be set! --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&[IF Niederlassung.BenutzerdefText1]key=[Niederlassung.BenutzerdefText1]&[END]sensor=false&libraries=places"></script> <script type="text/javascript" src="[document.attachement8]"></script>
Im Quelltext würde dann der Code entsprechend so aussehen:
<!-- Google Maps Stuff--> <!-- Google API Key should be set! --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyB8PYh2EdHLwgYdkW5UO54zDClATrnlRMU&sensor=false&libraries=places"></script> <script type="text/javascript" src="/Vacancies/4/Description/1?ShowDocument=8"></script>
Die zu lokalisierende Standort-Informationen konfigurieren
Jene Standort-Information (Adresse), welche für die Google Map verwendet werden soll, muss im Inserate-Layout vorhanden sein. Alles, was im Element mit id="location" steht, wird (mittels JavaScript) ausgelesen und zum Darstellen des Standortes auf der Karte verwendet.
Ein weiteres Element mit id="infowindow-content" definiert jene Information, welche im Info-Window angezeigt werden soll. D.h. alles, was im Block <span id="infowindow-content">...</span> steht, wird im Info-Window auf der Karte angezeigt. Es können dabei ganze HTML-Konstrukte dargestellt werden können.
Falls gar keine Standort-Informationen vorhanden sind (der HTML-Block id ="location" leer ist), so wird standardmässig jener HTML-Block geladen, welcher mit id="default-no-map" gekennzeichnet ist und entsprechend wird die Google Maps ausgeblendet (d.h. der ganze Bereich, welcher durch das Element id="map-panel" gekennzeichnet ist (siehe Abschnitt Google Maps im Inserate-Layout integrieren)).
Hinweise::
Für die Geocodierung (Umwandlung in Längengrad, Breitengrad) muss mindestens eine Strasse sowie der Ort hinterlegt sein.
Adress-Informationen können mittels Variablen extrahiert werden (siehe Abschnitt Konfigurieren der Standort-Informationen mittels Variablen).
Falls die Adress-Informationen nicht im Inserat sichtbar sein sollen, müssen diese per CSS ausgeblendet werden. Die Address-Informationen müssen aber auf jeden Fall im Inserate-Layout enthalten sein.
Beispiel: Lokalisierung und Definition des Info-Windows mit fest-codierter Adresse
Im folgenden Beispiel sind die Address-Informationen hard-codiert im Quelltext hinterlegt.
<span id="infowindow-content">
Blue Carpet France Ltd
</span>
<span id="location">
Rue Montmartre 64
75002 Paris
Frankreich
</span>
Konfigurieren der Standort-Informationen mittels Variablen
Durch die Verwendung von Variablen können Adress-Informationen dynamisch aus Umantis extrahiert werden. Falls Sie beispielsweise die Adresse einer Niederlassung anzeigen lassen wollen, müssen Sie erst die Variable, in der die Information gespeichert ist, entsprechend im Inserate-Layout verwenden.
Beispiel: Lokalisierung und Definition des Info-Windows (volle Adresse)
Im folgenden Beispiel wird die Adresse der entsprechenden Niederlassung für die Lokalisierung verwendet. Im Info-Windows wird dabei die komplette Adresse der Niederlassung angezeigt.
[IF Company.Address]
[IF Company.Municipality]
[IF Inserat.Titel7]<h2>[Inserat.Titel7]</h2>[END]
[IF Company.Name]<b>[Company.Name]</b>[END]<br>
<span id="infowindow-content">
<span id="location">
[IF Company.Address][Company.Address][END]<br>
[IF Company.Postalcode][Company.Postalcode][END]
[IF Company.Municipality][Company.Municipality][END]<br>
[IF Firma.Land][Firma.Land][END]
</span>
</span>
[END]
[END]
Beispiel: Lokalisierung und Definition des Info-Windows (nur Firmenname)
Im folgenden Beispiel wird die Adresse der entsprechenden Niederlassung für die Lokalisierung verwendet. Im Gegensatz zum vorangegangenen Beispiel wird im Info-Windows jedoch nur der Name der Niederlassung angezeigt.
<span id="infowindow-content">
[IF Company.Name][Company.Name][END]
</span>
<span id="location">
[IF Company.Address][Company.Address][END]<br>
[IF Company.Postalcode][Company.Postalcode][END]
[IF Company.Municipality][Company.Municipality][END]<br>
[IF Firma.Land][Firma.Land][END]
</span>
Google Maps im Inserate-Layout integrieren
Folgender HTML-Blöcke können verwendet werden, um die Google Maps sowie eine Kartenalternative im Inserate-Layout zu integrieren.
<!--Start Google Maps -->
<div id="map-panel">
<div id="map-canvas"></div>
<div id="directionsPanel"></div>
<div id="button-panel">
<input type="text" id="startTextBox" placeholder="Start" style="width: 140px;" />
<button id = "geolocate-button" onclick="geolocateUser()">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8
/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADdYAAA3WAZBveZwAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAB
/klEQVQ4T6WTyytEcRTHZ6yIUJQFDUUew9y58767SVlTUyykKMnCgp2xmo2dx8KSslCT2HmvZWEhZpKkiOIPIJIpeXy+t3uR7Jz69jvn+z3n/B73XM9v8
/v9ZZFIZBSshEKhNnH4q+FweIrVZyf9Yd5YLFZFwjC4B+8UnJqm6ZeIfwD3Bp5AOh6P16lGmm2Q1WAGPJL8zLpMw37WCunRaLQbfoH4DnyAdfRmu1gGMUzCI+st6AkGg5XQ3ztghmGUktOJfgEKNJ3nJOXune+dnXuU7HC9vEG9YrSxRCJRI5
/mtWgPyueKXRJHIN7BsnbWTvh74JIGhtMgB47RTcXsPoH+BjcrMUtwDjmA5iXuAzdw++5XIN4lFpdWzP1N/CP4bQXtFHc499YRG5SgYsuySsShtzhck+JkMllMg1bVKf6f0UlDckC3bsX4YyAHv+V+Kvw1uDyYduJW/B3WTRVowvQgC3pAvTb+Cbj68Yh5cq5ZOxXTeAj
/FW5R3XzgCeLWTeA0IbhJ4kbFrNPSnLtr6M5AgQ1S0tUkDTRhF/rONvmHoav4SLk0zHKSKlsIBAJ1kOugADQk41zF0I7S9RXgBtG0szY6ZAotu9gx/UzNJM6TqInUj3PoPiLcDtCdX1izwMpkMkV25U/TbGs8aTRH8ob7N8qnaAk+9XVs2zyeT9dWwuz6h9mkAAAAAElFTkSuQmCC">
</button>
<input type="text" id="endTextBox" placeholder="End" style="width: 68px; display: none;" />
<select id="mode" onchange="calcRoute();">
<option value="DRIVING" selected>Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
<button onclick="calcRoute();">GO!</button>
<div style="clear: both"></div>
<div id="text-panel">
<span id="text"></span>
</div>
</div>
</div>
<!-- End Google Maps -->
Hinweise:
Alle definierten Elemente mit einer ID werden vom Javascript verwendet. Falls die IDs angepasst werden oder Elemente entfernt werden, muss dies auch im Javascript nachgetragen werden.
Definieren des Google Maps Fallback Blockes
Falls gar keine Standort-Informationen vorhanden sind (der HTML-Block id ="location" leer ist), so wird standardmässig jener HTML-Block geladen, welcher mit id="default-no-map" gekennzeichnet ist und entsprechend wird die Google Maps ausgeblendet (d.h. der ganze Bereich, welcher durch das Element id="map-panel" gekennzeichnet ist).
Im folgenden Beispiel wird im Falle, dass keine Adresse definiert wurde, ein Bild stellvertretend für die Google Maps angezeigt.
<!-- Default Div: Dieses Div wird geladen, falls kein Element mit id="location" gefunden wurde und somit keine Map geladen wird -->
<div id="default-no-map" style="z-index: 9999; width: 328px; margin: 0 auto; display: none; overflow: hidden;">
<a href="http://de.wikipedia.org/wiki/St._Gallen" target="_blank"><img src="[document.attachement9]" alt="" /></a>
</div>
<!--Ende Default Div -->
Konfigurieren der Google Maps Routenberechnungs-Optionen
Folgende Optionen definieren, welche Routenberechnungsmethoden angeboten werden sollen.
<option value"DRIVING" selected> <!-- replace this comment with your Text for Driving--> </option> <option value"WALKING"> <!-- replace this comment with your Text for Walking--> </option> <option value"BICYCLING"> <!-- replace this comment with your Text for Bicycling--> </option> <option value"TRANSIT"> <!-- replace this comment with your Text for Transit--> </option>
Hinweise:
Da die Verkehrsmittel noch nicht parametrisiert sind, müssen sie noch von Hand an die entsprechende Sprachwünsche angepasst werden.
Festlegen des standardmässig selektierten Auswahlwertes
Das, als standardmässig vorausgewählte Element kann mit dem "selected"-Attribut festgelegt werden.
<option value"DRIVING" selected> <!-- replace this comment with your Text for Driving--> </option>
Die HTML-Elemente im Überblick
- id="location": Alles, was im Element mit id="location" steht, wird (vom JavaScript) ausgelesen und zur Geocodierung verwendet.
- id="infowindow-content": Alles, was im Element mit id="infowindow-content" steht, wird im Info-Window angezeigt, wobei ganze HTML-Elemente verwendet werden können.
- id="map-panel": In diesem Div wird unter anderem die Google Maps Karte mit id = "map-canvas" geladen und beinhaltet neben der Karte sämtliche Funktionalität.
- id="default-no-map": Dieses Element wird geladen, falls kein Element mit id="location" im Layout gefunden werden kann.
Design-Anpassungen von Google Maps
Da die Google Maps (z.B. Info-Windows mit Wegweisungen etc.) einen Designbruch zum Rest des Inserates verursachen kann, ist empfehlenswert, das Design entsprechend anzupassen. Folgender Ausschnitt gibt das anzupassende 'CSS wieder.
/* ----Google Maps Panel CSS------------------------------ */
div#map-panel {
width: 325px !important;
border: 1px solid #558BD5;
margin: 0px auto;
}
div#map-canvas {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 250px;
}
div#button-panel {
padding: 6px;
}
div#button-panel input,div#button-panel select,div#button-panel button {
border: 1px solid #BBBBBB !important;
left: 0;
position: relative;
top: 0;
vertical-align: middle;
height: 20px !important;
}
div#button-panel button {
padding: 1px;
}
div#button-panel select {
padding: 1px;
}
div#button-panel input {
padding: 0 !important;
}
div#text-panel {
background-color: #FFA8A8;
padding: 4px;
display: none;
margin-top: 4px;
}
/* CSS von Google für das Wegweisungsfenster */
.adp-directions {
border-collapse: collapse;
cursor: pointer;
display: none;
}
.adp-placemark {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid silver;
color: #000000;
cursor: pointer;
display: none;
margin: 10px 0;
vertical-align: middle;
}
.adp-summary {
font-weight: bold;
padding: 6px;
background-color: silver;
}
.adp-agencies {
font-size: 80%;
display: none;
}
.adp-details,.adp-legal {
color: #676767;
font-size: 0.8em;
text-align: right;
}
.gmnoprint a {
font-size: 0.9em;
font-weight: bold;
}
.pac-container {
width: 312px !important;
}
/* ---END Google Maps Panel CSS------------------------------- */
Hinweise:
- Dem Div, welches die Karte beinhaltet, muss zwingend eine Höhe und Breite zugewiesen werden.
- Die Elemente Input, Select und Button reagieren in den Browsern sehr unterschiedlich.
Wegweisungen mittels CSS einblenden
Damit die gesamten Wegweisungen und Routeninformationen wie Haltestellen bei ÖV oder Kreuzungen/Abzweigungen bei Auto sichtbar werden, müssen die entsprechenden CSS einträge angepasst werden.
Fortgeschrittene Konfigurationen
Anpassen der Javascript Funktionen
Standardfunktionalität
Niederlassung mit Marker und Info-Window anzeigen
Beim ersten Laden des Layouts wird auf der Karte die Niederlassung angezeigt und das Info-Window geöffnet. Um das Info-Window nach dem laden nicht automatisch zu öffnen, muss folgendes Code-Snippet auskommentieren oder entfernen werden.
//open the infoWindow at the end of this function //comment this out if you don't want to open the infoWindow at end of loading infowindow.open(map, marker);
Hinweise:
- Das Code-Snippet kommt im standard Javascript 3 Mal vor:
- 1. für die startTextBox
- 2. für die endTextBox
- 3. für die Geolokalisierung
- Die Adresse der Niederlassung wird als Text verwendet, allerdings kann der anzuzeigende Text in das HTML Element mit id="infowindow-content" verlegt werden.
- Bei erfolgreicher Autocompletion oder Geolocation wird der Startstandort auf der Karte mit Marker und Info-Window angezeigt.
Google Autovervollständigung auf der startTextBox
Die startTextBox unterstützt die Autovervollständigung. Der Platzhalter für die startTextBox ist "Start" und kann im HTML direkt gesetzt werden. Falls im HTML das Attribut placeholder= "Start" gelöscht wird, erstellt Google einen Standardtext in der Browsersprache des Besuchers.
Route berechnen und Infos anzeigen
Wenn ein Startstandort ermittelt wurde und das Transportmittel bestätigt wird, berechnet Google die Dauer und Distanz von Startstandort bis zur zugewiesenen Niederlassung. Die entsprechenden Informationen werden unterhalb der Eingabefelder angezeigt. Falls ein Fehler auftreten sollte, wird dieser Anstelle der Infomeldung angezeigt.
Geolokalisierung (Geolocation)
Alle HTML5 fähigen Browser ermöglichen es dem Benutzer, sich orten zu lassen. Die ermittelten Informationen werden direkt in die startTextBox eingetragen. Für ältere Browser wird der Geolocation Button durch eine Javascript Funktion ausgeblendet.
Hinweise:
- Der IE9 / IE10 unter Windows 8 lässt das Orten durch eine Standardeinstellung nicht zu. (Stand September 2013)
Erweiterte Funktionalität
Kreis anzeigen
Im Javascript kann das anzeigen eines Kreises zur Darstellung der Messgenauigkeit der Geolokalisierung angezeigt werden. Dieser Kreis kann allerdings sehr gross werden und somit mit der Füllfarbe die gesamte dargestellte Karte überdecken. Nach dem laden der Route kann zusätzlich die Farbe der Kreises geändert werden.
Folgende Konfigurationen können dabei vorgenommen werden:
- Kreis nach Geolocation anzeigen
- Kreisrahmenfarbe ändern
- Kreisrahmentransparent ändern
- Kreisfüllfarbe ändern
- Kreisfüllfarbentransparenz ändern
Zusätzlich Wissenswertes
Known Issues (Stand September 2013)
- Bei Clients mit Windows 8 und IE 9/ IE10 kann das Geocoding wegen fehlenden Berechtigungen nicht ausgeführt werden.
- Die Zeilen im Infowindow werden nicht immer gleichmässig umgebrochen.
- Wenn der Titel z.B. Fett gestyled wird, erscheint in jedem Fall eine Scrollbar.
- Bei grossen Distanzen kann die Ladezeit unter Umständen länger dauern.