So fügen Sie eine responsive Google Map in WordPress hinzu

Egal wohin Sie gehen, Google Maps zeigt Ihnen den Weg. In der Lage zu sein, sofort Wegbeschreibungen zu erhalten, ist beim Navigieren durch Städte unerlässlich geworden. Und als beliebteste Kartenlösung könnte das Hinzufügen von Google Maps zu Ihrer WordPress-Site nicht einfacher sein. Diese benutzerfreundliche Kartierungstechnologie liefert Geschäftsinformationen, Kontaktinformationen und Wegbeschreibungen zum Ort Ihrer Wahl, wodurch die Navigation für Ihre Benutzer äußerst bequem wird.

Sind Sie bereit, Ihrer WordPress-Site eine Karte hinzuzufügen? Es gibt verschiedene Möglichkeiten, eine hinzuzufügen, manuell und mit einem Plugin. Beginnen wir mit der DIY-Methode.

Manuelles Hinzufügen von Google Maps

Karte einbetten

Durch das Hinzufügen und Einbetten einer Karte wird die eigentliche Karte auf einer Seite angezeigt, und es sind nur ein paar einfache Schritte erforderlich. Das manuelle Hinzufügen der Karte ist der richtige Weg, wenn Sie nur eine (oder nur wenige) zu Ihrer Website hinzufügen möchten.

1. Gehen Sie zu Google Maps und geben Sie den Standort ein.

2. Klicken Sie auf die Suchschaltfläche.

3. Wählen Sie „Teilen“ (es wird die Option auf der rechten Seite sein).

4. Kopieren Sie den Einbettungscode und stellen Sie vor dem Kopieren sicher, dass alles ausgewählt ist.

Hinzufügen der Karte in WordPress

Um die Karte hinzuzufügen, müssen Sie einen Beitrag oder eine Seite bearbeiten. Ein großartiger Ort, um Ihre Karte hinzuzufügen, ist die Kontaktseite oder jeder Beitrag, der über einen bestimmten Ort spricht, den Ihre Benutzer möglicherweise finden müssen.

5. Gehen Sie zu Beiträge > Hinzufügen oder Seiten > Hinzufügen.

6. Öffnen Sie den HTML-Editor (im Textmodus) und fügen Sie den Einbettungscode dort ein, wo die Karte angezeigt werden soll.

7. Wählen Sie je nach Wunsch Entwurf speichern, Aktualisieren oder Veröffentlichen.

Wenn Sie die Seite anzeigen, sollten Sie Ihre Karte sehen. Wenn die Karte nicht angezeigt wird, vergewissern Sie sich, dass der gesamte Einbettungscode kopiert und in den Editor eingefügt wurde.

Responsive Gestaltung der Karte

Dies ist optional, wenn Sie mit Ihrer Karte arbeiten, aber eine großartige Idee, um Ihren Betrachtern die beste Benutzererfahrung zu bieten. Benutzer sind in der Regel unterwegs, wenn sie nach Wegbeschreibungen suchen, daher ist diese reaktionsschnelle Karte hilfreich, wenn sie ihr mobiles Gerät verwenden.

Sie haben vielleicht bemerkt, dass der iframe , den Sie in den Editor eingefügt haben, eine Breiten- und Höhenmessung enthielt – Sie müssen einige Anpassungen vornehmen, damit die Karte reagiert. Etwas einfaches CSS reicht aus; Alles, was Sie brauchen, ist ein zusätzliches div -Tag um den Einbettungscode. Verwenden Sie die Klasse responsive-map , damit Ihr Code jetzt so aussieht:

<div class="responsive-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3510.126963167523!2d-81.5660680494897!3d28.385232982430246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1463933469006" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Fügen Sie das CSS hinzu

Das Hinzufügen dieser CSS-Eigenschaften zu Ihrem Stylesheet ist das Letzte, was getan werden muss. Natürlich möchten Sie die Dinge je nach Seitendesign möglicherweise leicht anpassen.

.responsive-map{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.responsive-map iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

Und das ist es! Mit diesen einfachen Code-Ergänzungen haben Sie eine ansprechende Karte auf Ihrer Website. Sie sind sich nicht sicher, ob Sie den DIY-Weg gehen möchten? Lassen Sie uns nun eine einfache Plugin-Lösung durchgehen.

Sehen Sie sich den gesamten Code mit diesem CodePen an!

Hinzufügen von Karten mit dem MapPress Easy Google Plugin

Das manuelle Einbetten der Karte ist ein guter Ansatz, wenn nur wenige Karten vorhanden sind, aber was passiert, wenn Sie viele hinzufügen müssen? Beispielsweise kann ein Unternehmensstandort mehrere Standorte aufweisen, die angezeigt werden müssen. Das Hinzufügen jeder Karte einzeln kann etwas mühsam werden. Hier kommt ein Plugin ins Spiel. Es stehen viele großartige Optionen zur Auswahl, aber MapPress Easy Google Maps ist eine Option, die es wert ist, überprüft zu werden (und was ich in diesem Tutorial verwenden werde).

Zunächst müssen Sie MapPress Easy Google Maps auf Ihrer WordPress-Site installieren und aktivieren.

Plugin-Einstellungen

Sie werden das Plugin-Einstellungsmenü in der Admin-Seitenleiste bemerken, und Sie werden auch feststellen, dass es viele Optionen gibt, die mit MapPress geliefert werden, was es zu einer flexiblen Lösung für jede Website macht. Dinge wie Kartentyp, Zoom, Rahmen, Ausrichtung, Steuerung usw. können hier einfach angepasst werden.

Hinzufügen der Karte

Auch hier müssen Sie, um die Karte hinzuzufügen, einen Beitrag oder eine Seite bearbeiten.

1. Gehen Sie zu Beiträge > Hinzufügen oder Seiten > Hinzufügen.

2. Scrollen Sie auf dem Bearbeitungsbildschirm nach unten zum Abschnitt MapPress und wählen Sie „Neue Karte“.

3. Sie sehen den MapPress-Editor, in dem Sie eine Adresse für Ihre Karte eingeben können. Auch wenn Sie nicht die genaue Adresse haben, versuchen Sie, den Namen des Ortes einzugeben, und er sollte ihn für Sie finden. Wenn Sie Ihren Standort teilen möchten, ermöglicht der Link „Mein Standort“ dem Plugin, Ihren Standort automatisch zu erkennen.

4. Fügen Sie Ihrer Karte einen Titel hinzu und wählen Sie die Kartengröße aus.

Hinweis: Die Kartenbreite kann im Karteneditor oder im Shortcode als Prozentsatz angegeben werden, wodurch sie für Mobilgeräte optimiert wird. Die Höhe bleibt typischerweise fest. Wenn Sie es vorziehen, die Höhe und Breite zum Shortcode hinzuzufügen, würde es ungefähr so ​​​​aussehen: [mappress map width="100%" height="400"]

5. Klicken Sie auf „Speichern“ und dann auf „In Beitrag einfügen“. Die Karte befindet sich nun in Ihrem Beitrag.

6. Aktualisieren oder veröffentlichen Sie Ihren Beitrag, um die Karte anzuzeigen.

Diese Tipps und Tricks sollten Ihnen eine Richtung und einen Einblick in die Google Maps-Integration für Ihre Website geben. Unabhängig davon, ob die Karten manuell oder mit einem Plugin hinzugefügt werden, hilft eine Karte, die Ihren Benutzern sofort zur Verfügung steht, ihnen, den richtigen Ort zu finden.

Testen Sie es auf Lokal!

Denken Sie daran: Sie sollten niemals Änderungen an einer Live-Website vornehmen. Unsere kostenlose lokale Entwicklungs-App hilft Ihnen, Ihren Arbeitsablauf zu vereinfachen und sicher mit Ihrer Website zu experimentieren. Probieren Sie es noch heute aus!

Dieser Artikel wurde ursprünglich am 2. Februar 2016 veröffentlicht. Er wurde zuletzt am 14. Februar 2018 aktualisiert.