Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

WordPress für Designer: Themes und Layout-Werkzeuge

Google Maps

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Natürlich darf auch die Einbindung von Google Maps auf der Kontaktseite nicht fehlen. Sehen Sie hier, wie einfach dies vonstatten gehen kann.

Transkript

Es gibt zwei verschiedene Möglichkeiten, um Karten wie Google Maps in die Webseite zu integrieren. Dies möchte ich demonstrieren. Dazu erzeuge ich mir erst einmal eine weitere Section ganz zum Schluss. Ich gehe also hier in das Layout, "Add Section", die landet natürlich ganz hinten. Und die nenne ich jetzt einfach mal "Map". Eine Row reicht aus, eine Column ebenso. Und hier möchte ich jetzt die Karte integrieren. Ich suche also nach "maps". Wir haben jetzt zwei Möglichkeiten: "Map Embed" oder "Google Map". Ich zeige erstmal "Map Embed". Ich ziehe einfach dazu die Karte hier hinein und muss jetzt hier den Code einfügen. Den Code, den erhalten wir bei Google Maps. Ich bin also hier bei Google Maps und möchte mir jetzt die Karte hier einbetten. Dazu geht man hier auf "Teilen". Und dann kann man hier unter der Größe auf vorgefertigte Größen zurückgreifen, klein, mittel, groß. Oder, unter "Benutzerdefinierte Größe" können wir unsere Größe eintippen. Also 1.500 x 750, und dann müssen wir uns den Code hier unten kopieren. So, und diesen fügen wir uns jetzt an dieser Stelle einfach ein. Daraufhin wird die Karte hier nun hineingeladen. Wir haben noch ein paar weitere Optionen, also eigentlich nur eine, nämlich zu sagen "No Container". Hier können wir mit CSS arbeiten. Wir können jetzt natürlich noch hingehen und bei der Section sagen, dass wir kein Padding haben wollen, und dass wir hier in dem Fall keinen Container wünschen. Und dann wird die Karte komplett angezeigt. Ich werde sie aber jetzt wieder löschen, denn wir schauen uns jetzt noch die weitere Karte an. Und zwar ist das hier die Google Map in dem Fall. Und hier haben wir jetzt die Möglichkeit, mehrere Marker hinzuzufügen. Aber als erstes mal hier die Latitude und die Longitude. Ja, und diese lassen sich aus Google Maps auslesen. Wir haben nämlich hier die beiden Werte. Diese hier, und dann, mit Komma gefolgt, die nächsten. Oder alternativ kann man einfach an die Stelle klicken, mit der rechten Maustaste, und dann kann man sagen, was hier ist. Und dann kriegt man hier ebenfalls die Koordinaten angezeigt. Allerdings lassen sich diese nicht so leicht per Copy-and-paste, ja, kopieren. Doch, hier vielleicht hier per Rechtsklick. Probieren wir es einfach einmal aus. Ich gehe hier jetzt hin, und hier haben wir den ersten Wert. Okay, das hat funktioniert. Und hier kommt der zweite Wert. Und das funktioniert. Gut, als nächstes haben wir die Zoomstufe. Wir können also hier über die Zoomstufe etwas näher in die Karte hereinzoomen. Wir können hier Zoomcontrols aktivieren oder deaktivieren. Das sind hier unten diese beiden Schaltflächen. Wir können das "Draggable" aktivieren, dass die Karte sich auch verschieben lässt. Und wir können hier noch die Höhe definieren. Außerdem hier die Farbe. Wir könnten hier über die ganze Karte eine Farbe darüberlegen. Ich zeige das einmal gerade. Ich nehme einfach hier so einen Blauton, und dann wird die gesamte Karte in diesem Blauton dargestellt. Ja, und jetzt möchte ich keinen Container haben. Somit ist es noch einmal ein bisschen größer. Außerdem gehen wir jetzt hin und nehmen das Padding heraus, setzen das auf Null, so. Jetzt müssen wir noch diese Abstände entfernen. Und zwar ist das in dem Fall, so, jetzt kann ich es anklicken, hier in dem "Column" da haben wir es auf Null, mal gucken, ob hier noch etwas auf Null zu setzen ist. Nein. Dann in der "Row", genau, hier können wir jetzt sagen: "Column Container off". Und dann nimmt die Karte hier die gesamte Breite ein. Wie das Ganze aussieht sehen wir, wenn wir hier jetzt das Ganze abspeichern und dann uns die Seite einmal in einem neuen Tab anzeigen. Wenn wir jetzt hier herunterscrollen, dann sehen wir zuallerletzt unsere Karte. Wir können die Karte hier steuern, also rein- und rauszoomen, und wir können das Ganze anfassen und verschieben. Allerdings würde ich das Ganze von der Höhe vielleicht noch etwas anpassen. Die Karte ist einfach zu groß, sie nimmt zuviel Platz ein. Aber das zu ändern, ist ja das kleinste Problem. Wir haben gesehen, wie einfach sich die Karte hier integrieren lässt, über die Elemente, wenn man dann nach "maps" sucht, haben wir hier die Kartenelemente und können so ganz einfach Karten integrieren und diese dann noch nach Belieben anpassen.

WordPress für Designer: Themes und Layout-Werkzeuge

Erstellen Sie Ihre Wordpress-Website mit X-Themes und Cornerstone – ganz ohne Quellcode

5 Std. 8 min (56 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!