Kommentare 18

So kannst du Google-Maps ganz leicht auf deiner Webseite einbinden

Google Maps auf einer Webseite zu integrieren ist eine tolle Möglichkeit, Besuchern der Seite z.B. im Kontaktbereich schnell Informationen zum Standort einer Firma oder eines Geschäfts zu geben. Auch auf Reise-Blogs kann ich mir integrierte Google Maps als ein spannendes Feature in den Artikeln vorstellen. Um die tollen Karten einzubinden, kannst du entweder ein praktisches WordPress-Plugin nutzen, oder die Karten mit Hilfe von jQuery einbinden.

1. Der Google Maps API-Schlüssel

Hast du eine WordPress-Seite gibt es etliche hilfreiche Plugin-Lösungen, um eine Google Maps-Karte in ein paar Schritten auf deiner Seite einzubinden. Als ersten Schritt benötigst du aber jeweils einen Google Maps API-Schlüssel. Du kannst dir deinen API-Schlüssel auf der Webseite von Google generieren. Ein Schlüssel gilt jeweils nur für eine Domain.

2. MapPress Easy Google Maps-Plugin

Eines der Plugins, die ich getestet habe ist »MapPress Easy Google Maps«. Hast du dir den API-Schlüssel für deine Domain besorgt, kannst du diesen nach der Installation des Plugins unter Einstellungen / MapPress eintragen.

Außerdem hast du in den Einstellungen die Möglichkeit unter Address format das angezeigte Format entweder von Google zu übernehmen, oder deine eigenen Eintragungen mit »exactly as entered« zu übertragen. Unter Ländercode könnt ihr für deutsche Webseiten .de eintragen, weitere Einstellungsmöglichkeiten gibt es u.a. für die Kartensymbole, die Startansicht (Karten- oder Satellitenansicht) und die Farbe des Markierungs-Icons.

Google Maps auf Webseite einbinden
Die Plugin-Einstellungen bei MapPress.

2.1. Google Maps in einen Artikel oder eine Seite einfügen

Hast du alle Einstellungen vorgenommen und gespeichert, kannst du eine Google Maps-Karte auf einer Seite oder einem Artikel in WordPress einfügen. Dazu findest du auf der Seite/Artikel im Admin-Bereich das neue Feld »MapPress«.

Google Maps auf Webseite einbinden

Beim Erstellen einer neuen Seite / Artikels kannst du bequem eine Google-Karte einfügen.
Hier kannst du die Größe deiner Karte festlegen, die Adresse oder den Längen-Breitengrad für deine Markierung eingeben und eine Vorschau deiner Eintragungen anschauen. Möchtest du den Text der Adress-Anzeige ändern, kickst du in der Karten-Vorschau auf »Edit«.

Google Maps auf Webseite einbinden
So kannst du den Anzeigen-Text deiner Markierung mit HTML anpassen.

Dann klickst du auf den Button »Insert map shortcode in post«, um den Shortcode für deine Karte in deinen Artikel einfügen. Die Google Maps-Karte sieht dann z.B. auf der Kontaktseite einer Webseite so aus.

Google Maps auf Webseite einbinden
Google Maps auf der Kontakt-Seite integriert.

2.2. Mehrere Punkte auf einer Karte eintragen

Um mehrere Punkte auf deiner Karte zu markieren (z.B. für um eine Reiseroute anzuzeigen) kannst du den Button »Add location« klicken, und einen weiteren Ort eintragen. Dann klickst du am besten den Button »Center map«, um alle Punkte anzuzeigen.

Google Maps auf Webseite einbinden
Die Locations Stuttgart, Berlin, Hamburg werden angezeigt.

Eine ausführliche Dokumentation des MapPress-Plugins mit allen Optionen findest du aug der Seite des Plugin-Autors.

3. Weitere WordPress-Plugins für Google Maps

Es gibt natürlich noch etliche weitere WP-Plugins, mit deren Hilfe du eine Google-Karte in WordPress integrieren kannst. Interessante Möglichkeiten besonders für alle, die eine Google Maps am liebsten mit Hilfe eines Shortcodes oder einer PHP-Funktion in ihr WordPress-Theme integrieren möchten, bietet das wpMAPS-Plugin von Sergej Müller.

Sergej hat auf seinem Blog eine ausführliche Beschreibung und eine Liste der möglichen Parameter zur Plugin-Integration aufgelistet.

Das Google Maps Made Easy-Plugin bietet ähnliche Möglichkeiten wie das MapPress-Plugin, die Karte kann bei diesem Plugin außerdem direkt über den Text-Editor in WordPress in einen Artikel oder eine Seite eingebunden werden. Auf der Homepage des Plugins findest du eine ausführliche Beschreibung zu allen Funktionen.

4. Google Maps mit Hilfe von jQuery-Plugins einbinden

Natürlich musst du keine WordPress-Seite haben, um Google Maps nutzen zu können. Es gibt auch praktische jQuery-Plugins mit deren Hilfe du recht leicht, eine schicke Google-Karte auf deiner Webseite einbauen kannst. Im Artikel »10 jQuery-Plugins for Easier Google Maps Installation« auf dem Speckyboy-Blog findest du z.B. etliche hilfreiche Plugins.

Wie gefällt dir die Option, Google Maps auf deiner Webseite zu integrieren? Kennst du weitere Beispiele oder kreative Einsatz-Möglichkeiten für Karten von Google Maps? Über dein Feedback und weitere Tipps freue ich mich sehr!

18 Kommentare

  1. 2.1 ist gut… vor allem wenn man unterwegs war und zb Fotos gemacht hat um seinen User zu zeigen: Da war das!

    Gibts da irgendwelche Sicherheitsrisiken? Ich bin da mit einbinden externer Dinge immer sehr vorsichtig (deswegen auch kein Facebookbutton auf meiner Seite *G*)

    • Hallo Crissy,

      vielen Dank für dein Feedback. Ja, die Funktion bei 2.1. finde ich auch eine tolle Idee vor allem für Travel-Blogs :-)

      Sicherheitsrisiken gibt es meines Wissens eigentlich keine. Am besten liest du dir aber noch einmal die Nutzungsbedingungen für GoogleMaps genau durch, um sicher zu gehen, dass die Einbindung für dich in Ordnung ist.

      Viele Grüße,
      Ellen

    • Hallo Tino,

      vielen Dank für dein Feedback. Ja, du hast Recht. Natürlich reicht auf einer Kontaktseite auch ein Link. Aber eventuell kann es ein schönes Feature auf der Kontaktseite sein, Google Maps direkt zu integrieren. Die Option Google Maps auf Reise-Blogs zu nutzen, finde ich selbst auch klasse, wo ich doch sowieso ein riesen Travelblog-Fan bin :-)

      Viele Grüße,
      Ellen

      • Guten Morgen Ellen,

        ich meinte nicht einen gewöhnlichen Link, sondern die Google Funktion “Einbetten in eine Website”. Stehet bei Google Map rechts oben unter Links. Mit einem Brancheneintrag geht es noch einfacher…

        Ein schönes Feature ist es auf jeden Fall :).

        Grüße

        • Guten Morgen Tino,

          vielen herzlichen Dank für deine Rückmeldung, und deinen Hinweis auf die Einbetten Funktion bei Google Maps. Die Funktion kannte ich ja noch gar nicht, das muss ich gleich mal ausprobieren. Vielen Dank für diesen Tipp :-) Es tut mir leid, dass ich dich im vorherigen Kommentar falsch verstanden hatte.

          Viele Grüße,
          Ellen

  2. Hallo Ellen!
    Die Einbindung von Karten mit Hilfe des Plugins “MapPress Easy Google Maps” funktioniert, dank der verständlichen Erklärung, sehr komfortabel.
    Da eine eindeutige ID vergeben wird, kann man diese Karten auch anderen Beiträgen zuordnen – wenn das notwendig ist.
    Können diese Karten dann trotzdem individuell in der Größe angepasst werden? Ich möchte nämlich vermeiden, alle Marker neu setzen zu müssen. Die Bearbeitung der Karte scheint wohl nur auf der Seite ihres Ursprungs möglich zu sein.

    Viele Grüße,

    Ralf

    • Hallo Ralf,

      vielen Dank für dein Feedback. Es freut mich, dass dir der Beitrag zum Google Maps Plugin gefällt :-) Ja, leider sind die Anpassungsmöglichkeiten der Karten meines Wissens auch nur auf der Einstellungsseite zu machen.

      Viele Grüße,
      Ellen

  3. Tolle Sache aber wie ist das rechtlich, darf ich Google Maps so ohne weiteres einbinden oder brauche ich da wieder irgendwelche Genehmigungen o.ä. ? Nicht, daß es dann wieder Abmahnungen hagelt ???

    lg Kati.

  4. Pingback: WordPress: Google Maps Karte ohne Plugin in Seite oder Artikel einbinden | PAS solutions GmbH, die Agentur aus Frauenfeld, Thurgau

  5. Hallo Ellen, danke für den hilfreichen Artikel. Ich präsentierte auf meinem WP-Blog eine wachsende Zahl von Locations, für die ich ein Map Plugin suche. Aktuelle müsste die Karte ca. 35 Links zu Standorten enthalten – es werden aber pro Woche 1 Location mehr. Bei den meisten Maps kann man den Status, in meinem Fall 35 Links, nicht speichern. Dadurch muss ich ständig alles von “Null” neu aufbauen. Hast du eine Idee?

  6. jens k

    hallo leute ich weiß der post ist schon alt aber ich habe ein problme und zwar will ich google maps auf meiner homepage einbinden..aber ich lese immer mehr von angeblich rechtlichen problemen…ist da was dran? Wie sieht es zum beispiel mit solchen tools aus wie dieses hier …ist das legal oder kann ich da “probleme” kriegen? gerne auch tips per e-mail
    grüße sven

  7. Ralf

    Also irgendwie sieht es bei mir installiert ganz anders aus: ich kann das Feld für die eingabe des rechtlich erforderlichen API-Keys nicht finden – oder das gibts nur in der vergleichsweise teuren PRO-Version – wovon hier aber nichts steht…

  8. Daniel

    Hallo, auch wenn dein Blogeintrag schon älter ist, rankt er bei Google doch ganz oben, Deshlab stelle ich meine Frage mal hier. Gibt es eine Möglichkeit MapPress auch in eine category einzufügen und mehrere Punkte auf der Karte anziegen zu lassen?

  9. Julia

    Hallo,

    ich habe eine Frage… den API Key gibt es ja so viel ich weiß nicht mehr, ab Version 3. Ich verwende “MapPress Easy Google Maps” für WordPress (mit API Version 3) auf meiner kommerziellen Seite. Muss ich mich dafür irgendwo registrieren? Wenn ja wo? Oder kann ich einfach das Plugin verwenden? Hier gibt es nämlich nix wo ich was eintragen kann…

    und die Bedingungen sind einfach für mich nicht verständlich…

    Danke

Schreibe eine Antwort