Google Maps mit Shortcode in WordPress einbinden

Google Maps in Wordpress einbauen

Unternehmen bieten auf Ihrer Internetseite oftmals eine Anfahrtsbeschreibung.

Mit der folgenden Anleitung ist es besonders einfach eine Karte von Google Maps per Shortcode in WordPress einzubauen.

1. Google Maps Shortcode in functions.php erstellen

function rockable_googlemap($atts, $content = null) {
   extract(shortcode_atts(array(
               "width" => '940',
               "height" => '300',
               "src" => ''
   ), $atts));

return '<div>
         <iframe src="'.$src.'&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="'.$width.'" height="'.$height.'"></iframe>
        </div>
       ';
}

add_shortcode("googlemap", "rockable_googlemap");

2. URL von Google Maps holen

Gehen Sie auf https://maps.google.de/ und suchen Sie nach Ihrem Standort. Klicken Sie anschließend das Link-Symbol (neben dem Druck-Symbol) und kopieren den Link.

3. Einfügen des Google-Maps Shortcode in einen Beitrag oder eine Seite

Fügen Sie den folgenden Code in Ihren Artikel oder Ihre Seite an die gewünschte Stelle ein:

[googlemap src="google_map_url_muss_hier_rein"]

Alternativ fügen Sie diesem Shortcode noch die Höhen oder Breitenangabe der Map an:

[googlemap width="600" height="250" src="google_map_url_muss_hier_rein"]

Und so sieht das Ergebnis dann beispielsweise aus:

[googlemaps src=“https://maps.google.de/maps?q=schlehenweg+7,+91186&hl=de&ie=UTF8&sll=48.917413,11.407993&sspn=3.992588,10.821533&hnear=Schlehenweg+7,+91186+B%C3%BCchenbach,+Mittelfranken,+Bayern&t=m&z=16″ width=“400″ height=“400″]

4. Alternative

Alternativ können Sie auch direkt ein iFrame einbinden. Den Code finden Sie ebenso auf Google Maps, wenn Sie das Link-Symbol klicken.

Jetzt WordPress Newsletter in dein Postfach

Melde dich jetzt für meinen Newsletter an und du erhältst regelmäßig Tipps und Tricks zu WordPress in dein Postfach. Natürlich kannst du ihn jederzeit abbestellen.


8 Kommentare

  1. Super, danke. Funktioniert sehr gut, vor allem ohne Plugin 🙂

  2. Andreas sagt:

    Vielen Dank. Schnell und einfach zum Ziel – ohne Plugin-Ballast. Super!

  3. Es Funktioniert wunderbar, sogar im Default Theme auf 4.6

  4. Chris sagt:

    Bei der Variante mit dem Shortcode wird mir die Karte nicht eingeblenden, sondern nur der leere graue Rahmen.

    Kann mir jemanden einen Tipp geben?

  5. Florian sagt:

    Wenn ich iFrames einbinden will, wird auf der Website nur der Code angezeigt, aber keine Karte.

    • Peter sagt:

      @Florian: Bitte darauf achten, dass der Reiter „TEXT“ und nicht der Reiter „Visuell“ aktiv ist. Dann sollte das funktionieren.

Kommentar schreiben

Mit Absenden deines Kommentars erklärst du dich mit der Verarbeitung deiner hier angegebenen Daten einverstanden (Datenschutzerklärung). Diese werden nur zur Verwaltung der Kommentare verwendet und keinem anderen Zweck zugefügt. Du kannst jederzeit per E-Mail an info@netz-gaenger.de der Speicherung deiner Daten widersprechen.

* Notwendige Angaben

Netzgänger Webdesign | Rohrersmühlstraße 22 in Schwabach | Bayern
Kontakt: info@netz-gaenger.de
↑ oben
Inhalt