Mit dem Plugin SiteOrigin Google Maps navigieren Sie zu der Seite oder dem Beitrag, auf der bzw. dem Sie eine Google-Karte anzeigen möchten.

Google Maps einfügen

Klicken Sie auf die gewünschte Zeile und Zelle und klicken Sie auf Widget hinzufügen , um das Dialogfeld Neues Widget hinzufügen zu öffnen.

Google Maps einfügen

---

SiteOrigin Dialogfeld "Widget hinzufügen"

Verwenden Sie das Dialogfeld "Widget hinzufügen", um nach dem SiteOrigin Maps-Widget zu suchen.

Klicken Sie auf das SiteOrigin Google Map-Widget, um es in die ausgewählte Zeile und Zelle einzufügen.
Bewegen Sie den Mauszeiger über das Widget, um die weiteren Optionen Bearbeiten, Duplizieren und Löschen anzuzeigen.

SiteOrigin Dialogfeld "Widget hinzufügen"

Bearbeiten einer Karte

Um eine Karte zu bearbeiten, bewegen Sie den Mauszeiger über das Widget und klicken Sie auf den Link Bearbeiten. Der SiteOrigin Google Map-Bearbeitungsdialog wird angezeigt. Hier finden Sie die Standardeinstellungen für Widget-Stile sowie bestimmte SiteOrigin-Google Map-Einstellungen.

Die spezifischen SiteOrigin Google Map-Einstellungen werden unten erläutert.

Einstellungen

API-Schlüssel

Damit Ihr Karten-Widget ordnungsgemäß funktioniert, ist ein Google Maps-API-Schlüssel erforderlich. Eine schrittweise Anleitung zum Abrufen eines API-Schlüssels finden Sie unter: Abrufen eines Schlüssels / Authentifizierung . Sobald Sie Ihren API-Schlüssel haben, gehen Sie zu PluginsSiteOrigin-Widgets , suchen Sie nach dem Karten-Widget und klicken Sie auf die Schaltfläche Einstellungen. Dort finden Sie folgende Einstellungen:

Holen Sie sich den API-Schlüssel

Sie müssen mindestens einen API-Schlüssel mit Ihrem Projekt verknüpft haben.

So erhalten Sie einen API-Schlüssel:

1. Wechseln Sie zur Google Cloud Platform Console .
2. Klicken Sie auf die Projekt-Dropdown-Liste und wählen oder erstellen Sie das Projekt, für das Sie einen API-Schlüssel hinzufügen möchten.
3. Klicken Sie auf die Menü-Schaltfläche  und wählen Sie APIs & Services> Credentials .
4. Auf der Anmeldeinformationen Seite klicken Sie auf Anmeldeinformationen erstellen> API - Schlüssel .
   Das Dialogfeld " API-Schlüssel erstellt " zeigt Ihren neu erstellten API-Schlüssel an.
5. Klicken Sie auf Schließen.
   Der neue API-Schlüssel wird auf der Seite Anmeldeinformationen unter API-Schlüssel aufgeführt .
   (Denken Sie daran , den API-Schlüssel einzuschränken, bevor Sie ihn in der Produktion verwenden.)

Fügen Sie den API-Schlüssel Ihrer Anfrage hinzu

Sie müssen jeder Google Maps JavaScript-API-Anfrage einen API-Schlüssel hinzufügen. Ersetzen YOUR_API_KEYSie im folgenden Beispiel durch Ihren API-Schlüssel.

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

API-Schlüssel :
Geben Sie Ihren von Google bereitgestellten API-Schlüssel ein.

Reaktionsschneller Haltepunkt :
Diese Einstellung steuert, wann die Karte den mobilen Zoom verwendet. Dieser Haltepunkt wird nur verwendet, wenn in den SiteOrigin Google Maps-Einstellungen ein mobiler Zoom eingestellt ist. Der Standardwert ist 780px.

Widget-Einstellungen

Globale Einstellungen für Maps-Widgets für API-Schlüssel und reaktiven Haltepunkt.

Erstellen eines Schlüssels, Aktivieren von APIs und Eingeben von Rechnungsdetails

Zusätzlich zum Erstellen eines Google Maps-API-Schlüssels müssen Sie auch die Geokodierungs-API aktivieren . Wenn Sie Ihrer Karte eine Wegbeschreibung hinzufügen möchten, muss die Routen-API aktiviert sein. Wenn Sie anstelle einer interaktiven Karte eine statische Image-Map verwenden möchten, muss die statische Maps-API aktiviert sein.

Schließlich müssen Sie Google Ihre Zahlungsinformationen mitteilen. Weitere Informationen zum Hinzufügen Ihrer Zahlungsinformationen finden Sie unter Hinzufügen, Entfernen oder Aktualisieren einer Zahlungsmethode .

Einstellungen - Optionen für die Kartenanzeige -

Kartenmitte

Hier geben Sie den Namen eines Ortes, einer Stadt oder eines Landes an. Es kann auch eine genaue Adresse sein.

Nachdem Sie den Ort angegeben haben, wird die Karte mit den Standardeinstellungen angezeigt, wie unten gezeigt:

Kartenmitte Dortmund

Kartentyp

Es stehen zwei Kartentypen zur Auswahl. Interaktives (Standard) und statisches Bild mit jeweils eigenen Einstellungen.

Kartentyp

Wählen Sie zwischen einer interaktiven oder einer statischen Karte.

Interaktive Karte

Karten-Widget-Einstellungen.

Die interaktiven Karteneinstellungen umfassen Folgendes:

• Height / Höhe : In Pixel definiert. Die Kartenbreite wird durch die Breite der Zelle definiert, in die die Karte eingefügt wird.
• Zoom level / Zoomstufe : Ein Wert von 0 (Welt) bis 21 (Straßenebene).
• Mobile zoom level / Mobile Zoomstufe : Ein Wert von 0 (Welt) bis 21 (Straßenebene). Dieser Zoom ist spezifisch für Mobilgeräte.
• Zum Zoomen scrollen: Ermöglicht das Scrollen über die Karte zum Vergrößern oder Verkleinern.
• Gesture Handling / Gestenbehandlung : Verwenden Sie die bereitgestellten Optionen, um festzulegen, wie Gesten auf der Karte behandelt werden sollen. Alle Details finden Sie in der Google Maps-Dokumentation .
  • Greedy / Gierig : Die Karte schwenkt immer (nach oben oder unten, links oder rechts), wenn der Benutzer über den Bildschirm streicht (zieht). Mit anderen Worten, sowohl ein Wischen mit einem Finger als auch ein Wischen mit zwei Fingern bewirken, dass die Karte geschwenkt wird.
  • Cooperative / Kooperativ : Der Benutzer muss mit einem Finger über die Seite streichen und mit zwei Fingern über die Karte schwenken. Wenn der Benutzer die Karte mit einem Finger überstreicht, wird auf der Karte eine Überlagerung angezeigt, die den Benutzer auffordert, die Karte mit zwei Fingern zu bewegen. In Desktop-Anwendungen können Benutzer die Karte durch Scrollen vergrößern oder verkleinern, während sie eine Änderungstaste (Strg- oder ⌘-Taste) drücken.
  • None / Keine : Diese Option deaktiviert das Schwenken und Kneifen auf der Karte für mobile Geräte und das Ziehen der Karte auf Desktop-Geräten.
  • Auto : Abhängig davon, ob die Seite scrollbar ist, setzt die Maps JavaScript-API die Gestenbehandlungseigenschaft wie folgt auf kooperativ oder gierig:
    • • Auf kooperativ setzen, wenn der Seitenkörper größer als das Kartenfenster ist oder wenn die Maps JavaScript-API die Seitengröße nicht bestimmen kann (z. B. wenn es sich um einen Iframe handelt).
      • Auf "Greedy / Gierig" setzen, wenn der Seitenkörper nicht größer als das Kartenfenster ist und es unwahrscheinlich ist, dass der Benutzer einen Bildlauf durchführen muss.

    Die Vollbildsteuerung ist auf Mobilgeräten standardmäßig sichtbar, sodass Benutzer die Karte problemlos vergrößern können. Wenn sich die Karte im Vollbildmodus befindet, können Benutzer die Karte mit einem oder zwei Fingern verschieben. Hinweis: iOS unterstützt die Vollbildfunktion nicht. Das Vollbild-Steuerelement ist daher auf iOS-Geräten nicht sichtbar.

• Disable default UI / Standardbenutzeroberfläche deaktivieren :
  Blendet die Standardsteuerelemente von Google Maps aus.
• Keep map centered / Karte zentriert lassen : Lässt die Karte zentriert, wenn die Größe des Containers geändert wird.
• Fallback-Image : Dieses Image wird angezeigt, wenn beim Anzeigen der angegebenen Karte Probleme auftreten.
• Fallback-Bildgröße : Legen Sie die Größe des Fallback-Bildes fest.

Bitte beachten Sie: Um die Option "Statisches Bild" verwenden zu können, muss die statische Google Maps-API aktiviert sein.

Stellen Sie sicher, dass die statische API von Google Maps aktiviert ist, um die Option "Statisches Bild" zu verwenden.

Map Type - Static Image

Die Einstellungen für die statische Imagemap umfassen Breite, Höhe und Zoomstufe, Ersatzbild und Ersatzbildgröße, wie oben definiert. Darüber hinaus sind die folgenden zwei Einstellungen in dem Abschnitt Static Map enthalten:

• Ziel-URL : Geben Sie eine URL ein, wenn Sie Ihre Karte verlinken möchten.
• In neuem Fenster öffnen: Aktivieren Sie diese Option, um den Link in einem neuen Fenster zu öffnen.

Mit Markierungen werden Sonderziele auf der Karte definiert.

Der Marker-Bereich, in dem Sonderziele definiert werden.

Markierung in Kartenmitte anzeigen

Ein Klick auf die Checkbox zeigt eine Markierung in der Mitte der Karte, auf der Basis der Informationen , die Sie in der mitgelieferten Kartenzentrum Feld.

Markierungssymbol

Um die Standardkartenmarkierung durch Ihr eigenes Bild zu ersetzen, klicken Sie auf die Schaltfläche „Choose Media“ (Medien auswählen), um das Symbol aus der Medienbibliothek auszuwählen.

Ziehbare Marker

Mit dieser Funktion können Sie alle Markierungen auf der Karte ziehen.

Markierungspositionen

Um einen neuen Marker zu erstellen, klicken Sie auf der Registerkarte Markerpositionen auf Hinzufügen. Ein neuer Marker wird angezeigt.

Markierungspositionen

Fügen Sie zusätzliche Markierungspositionen hinzu.

Klicken Sie auf den Dropdown-Pfeil, um den Ort oder die Adresse der Markierung im Feld „Ort“ anzugeben. Geben Sie bei Bedarf zusätzliche Markierungsinformationen wie folgt ein:

• Inhalt des Infofensters : Geben Sie den Inhalt und das Medium des Marker-Infofensters ein.
• Info - Fenster max Breite : Stellen Sie in Pixeln für die Marker - Info - Fenster eine maximale Breite.
• Benutzerdefiniertes Markierungssymbol : Legen Sie ein benutzerdefiniertes Markierungssymbol fest.

Geben Sie die Position der Markierung ein.

Fügen Sie so viele Marker wie erforderlich hinzu.

Klicken Sie auf eine Markierung und halten Sie sie gedrückt, um sie zu verschieben, wenn die Funktion zum Ziehen aktiviert ist.

Markerpositionen angzeigen

Klicken, halten und ziehen Sie, um die Markierungspositionen zu ändern.

Wann sollte Info Windows angezeigt werden?

Wählen Sie aus, wann Markierungsinfofenster angezeigt werden sollen. Wählen Sie zwischen Klicken, Bewegen mit der Maus oder Immer.

Wann sollte Info Windows angezeigt werden?

Mehrere Infofenster gleichzeitig zulassen?

Aktivieren Sie diese Option, wenn Benutzer mehr als ein Marker-Infofenster gleichzeitig anzeigen können sollen. Diese Einstellung wird ignoriert, wenn Info-Fenster so eingestellt sind, dass sie immer angezeigt werden.

Stile

Es stehen drei Styling-Optionen zur Auswahl. Normal (Standardstil), Benutzerdefiniert und RAW-JSON (JavaScript-Objektnotation)= Vordefinierte Stile

Stile

Stile: Benutzerdefiniert

Klicken Sie auf das Optionsfeld Benutzerdefinierter Kartenstil, um zusätzliche benutzerdefinierte Stiloptionen anzuzeigen.

Name der gestalteten Karte

Hier betiteln Sie Ihre benutzerdefinierten Karteneinstellungen. Der Titel wird in der oberen rechten Ecke der Karte angezeigt.

Benutzerdefinierte Kartenstile

Hier können Sie verschiedene Funktionen der Karte gestalten. Um eine neue Funktion hinzuzufügen, klicken Sie auf die Schaltfläche "Hinzufügen" unter "Benutzerdefinierte Kartenstile". Klicken Sie auf den Dropdown-Pfeil dieses Stils, um mit der Bearbeitung zu beginnen. Fügen Sie so viele Features hinzu, wie Sie bearbeiten möchten.

• Wählen Sie das zu gestaltende Kartenobjekt aus

Um auszuwählen, welche Kartenfunktion Sie stylen möchten, klicken Sie auf das Dropdown-Menü. Die Liste enthält die folgenden Funktionen (die Standardfunktion ist Wasser):

In diesem Beispiel werde ich das Standardfeature "Wasser" formatieren.

• Wählen Sie den zu formatierenden Elementtyp aus

Beim Stylen eines Features können Sie die Features Geometrie, Beschriftung oder beides auswählen. Klicken Sie auf das Dropdown-Menü, um das Element auszuwählen, das Sie stylen möchten.

• Sichtbar

Mit der Einstellung "Sichtbar" können Sie die Sichtbarkeit eines Feature-Elements aktivieren oder deaktivieren, indem Sie auf das Kontrollkästchen klicken.

Das folgende Beispiel enthält die folgenden Einstellungen: Kartenfunktion: Wasser, Elementtyp: Geometrie, Sichtbarkeit: Aus

• Farbe

Ändern Sie die Farbe des Feature-Elements, indem Sie auf die Schaltfläche „Farbe auswählen“ klicken. Wählen Sie die gewünschte Farbe mit der Farbpalette aus oder geben Sie den Hex-Wert (#) ein. Passen Sie die Farbintensität mit dem Schieberegler an.

Das folgende Beispiel enthält die folgenden Einstellungen: Kartenfunktion: Wasser, Elementtyp: Geometrie, Farbe: # 81d742

Stile: Raw JSON (JavaScript-Objektnotation)

Wenn Sie auf das Optionsfeld Raw JSON klicken, werden zwei zusätzliche Optionen angezeigt. Name der gestalteten Karte wie oben erläutert und das Bearbeitungsfenster für RAW-JSON-Stile.

Hier können Sie vordefinierte Stile aus Snazzy Maps kopieren und einfügen . Im folgenden Beispiel habe ich das Blue Essence- Styling von Snazzy Maps verwendet. Einige der Stile funktionieren mit dem statischen Imagemap-Typ nicht ordnungsgemäß.

Richtungen

Die Routeneinstellungen werden verwendet, um eine Route auf Ihrer Karte mit Wegpunkten zwischen Ihrem Startpunkt und Ihrem Ziel anzuzeigen. Stellen Sie sicher, dass Sie das Directions API im Google APIs Dashboard aktiviert haben .

Startpunkt und Ziel

Beginnen Sie mit der Angabe von Startpunkt und Ziel in den dafür vorgesehenen Feldern.

Reiseart, Autobahnen und Maut vermeiden

Wählen Sie den erwarteten Reisemodus aus dem Dropdown-Menü. Zu den verfügbaren Optionen gehören Fahren, Gehen, Radfahren und Transit.

Reisemodus

Geben Sie den erwarteten Reisemodus an.

Wählen Sie aus, ob Autobahnen und Mautgebühren vermieden werden sollen, indem Sie auf das entsprechende Kontrollkästchen klicken. Je nach ausgewähltem Reisemodus und zu vermeidenden Routen werden unterschiedliche Reiserouten ausgewählt. Die Option Ansichtsfenster beibehalten verhindert, dass die Karte zentriert und um die Richtungen herum gezoomt wird. Verwenden Sie diese Option, wenn Ihre Karte andere Markierungen oder Features enthält.

Wegpunkte

Ein Wegpunkt ist ein beliebiger Ort, den Sie in die Reiseroute aufnehmen möchten. Ein Wegpunkt kann ein Punkt von Interesse oder ein Zwischenstopp sein. Fügen Sie einen Wegpunkt hinzu, indem Sie auf die Schaltfläche „Hinzufügen“ unter den Wegpunkten klicken. Beginnen Sie mit der Bearbeitung eines Wegpunkts, indem Sie auf den Dropdown-Pfeil in der äußersten rechten Ecke dieses bestimmten Wegpunkts klicken.

• Ort

Geben Sie einen Wegpunkt an, indem Sie die Adresse in das dafür vorgesehene Feld eingeben. Wegpunkte werden durch einen weißen Punkt auf der Karte angezeigt.

• Zwischenstopp

Wenn der Wegpunkt, den Sie angeben möchten, ein Zwischenstopp ist, klicken Sie auf das Kontrollkästchen Zwischenstopp. Der Wegpunkt wird nun als grüne Markierung angezeigt.

Startpunkt, Zwischenziel und Zwischenziel werden in alphabetischer Reihenfolge angezeigt. Klicken Sie auf einen der Marker, um dessen Adresse anzuzeigen.

Wegpunktlimits: Es gibt ein Limit von 25 Wegpunkten. Weitere Informationen zur diesbezüglichen Preisgestaltung finden Sie in der Dokumentation zu Preisänderungen .

Wegpunkte optimieren

Durch Aktivieren des Kontrollkästchens Wegpunkte optimieren kann der Google Maps-Dienst die Wegpunkte für die kürzeste Reisedistanz neu anordnen.