Google Maps in WordPress Blog integrieren

Dank Google Maps findet man recht einfach eine gewünschte Adresse. Diese Maps können Sie auch recht einfach in Ihr WordPress Blog integrieren. Dafür benötigen Sie nur ein Plugin, eine Google API und die Koordinaten der Adressen, die Sie in der Map darstellen möchten.

Google API & Installation
Melden Sie sich zunächst bei Google an. Wenn Sie noch keinen Account haben erstellen Sie einen. Dann wechseln Sie zur Google Maps API-Seite. Hier tragen Sie die URL ein für die Sie die API benötigen. Diese API ist ein Key, der Ihnen die Nutzung von Google-Maps erlaubt. Diese API ist immer nur für eine Website gültig! Nun laden Sie das Plugin herunter, entpacken es, speichern es in den Ordner wp-content/plugins/ Ihres Servers und aktivieren das Plugin im admin-Bereich Ihres WordPress-Blogs. Unter Einstellungen – Inline Google Maps tragen Sie nun die API ein.

Einbau der Map in Ihre Seite
Dei Integration in Ihre Website ist nun ein Kinderspiel. Doch zuvor suchen Sie noch die Punkte heraus, die Sie auf der Map darstellen möchten. Gehen Sie hierfür auf die Seite von iTouchmap und geben Sie die Adressen der besagten Punkte ein. Für jeden Punkt notieren Sie sich die Werte Längen- und Breitengrad.
Nun fügen Sie in einen Artikel oder eine Seite die folgenden Befehle ein:

<dl style=“visibility: hidden;“ title=“googlemap;w:100%;h:400″>

<dt><a href=“http://maps.google.com/?z=16&ll=48.137246,11.575357&om=2″>Zentrum</a></dt>

<dt><a href=“http://maps.google.com/?ll=48.137661,11.579846″>map</a></dt>
<dd>Hofbräuhaus</dd>

<dt><a href=“http://maps.google.com/?ll=48.135612,11.576104″>map</a></dt>
<dd>Viktualienmarkt</dd>

</dl>

Der erste Wert gibt den Mittelpunkt der Landkarte wieder. Er braucht auch keine Beschreibung. Die Zeile 3&4 erzeugen nun einen Marker. Für jeden weiteren Punkt fügen Sie nach diesem Schema weitere  Zeilen mit <dt>Link</dt><dd>Text</dd> hinzu.

Sie können auch ganz einfache Karten mit nur einem Marker erzeugen indem Sie in einem Text einen Link nach flgendem Schema einfügen:

<a href=“http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=M%C3%BCnchen+Viktualienmarkt&sll=51.151786,10.415039&sspn=19.786545,39.550781&ie=UTF8&z=16&iwloc=addr“ title=“googlemap“>Viktualienmarkt</a>

Den Kink können Sie bequem aus Google Maps herauskopieren. Klicken Sie im Bereich rechts oben auf Link. Beispiele finden Sie auf der Homepage des Plugin-Entwicklers.

Website:
Thema: Google Maps integrieren
Name der Website: Google-Konten
Homepage: Google Account anlegen / einloggen
Homepage: Google Maps API-Seite

Name der Website: WordPress Plugin
Entwickler-Homepage: Zur Homepage on Avi
Homepage: Zur Plugin Homepage
Download: Download starten

Name der Website: iTouch Map
Homepage: Längen und Breitengrad bestimmen

Share this post:

1339

Hinterlassen Sie Ihren Kommentar