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.
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«.
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«.
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 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.
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!
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
Vielen Dank für deinen Artikel. Hab mich direkt mal dran gesetzt und mit der Api ein wenig gespielt. :)
Hallo Kevin,
freut mich, dass dir der Artikel gefallen hat :-) Wenn du Google Maps eingesetzt hast, schick doch einen Link zur Seite.
Würde mich sehr interessieren :-)
Viele Grüße,
Ellen
Hallo!
Schöner Artikel.
Sollte es nur um die Kontaktseite gehen, genügt doch bei einem Brancheneintrag in Google die Link-Funktion.
Für alles andere Bsp. Reiseblogs sehr sinnvoll.
Grüße
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
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
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.
Ist das oben erwähnte WordPress-Plugin mit Bugis kompatibel, reagiert es beispielsweise korrekt auf das responsive Layout?