Google Maps in Blog-Beiträge einbauen kann man entweder mit dem von Google Maps bereit gestelltem Code oder auch viel einfacher. Ich hab das mit wpMAPS gelöst. Und wer es ein bisschen individueller mag, baut einfach ein bisschen Code drumrum und nutzt die Benutzerdefinierten Felder in WordPress.

Google Maps mit wpMAPS

Das wpMAPS Plugin gibts bei Sergej Müller, das ist der Coder von meinem Lieblings-Plugin wpSEO. Dort oder direkt bei WordPress runterladen, in den Plugin-Ordner auf den Server packen, aktivieren, fertig. Dann kommen wir zu den Einstellungen.

Um wpMAPS nutzen zu können, braucht man einen Google Maps API key, den man direkt hier bei Google Maps bekommt, diesen trägt man dann in die Einstellungen für wpMAPS ein. Größe der anzuzeigenden Karte und was alles eingeblendet werden soll, kann man hier global für den ganzen Blog einstellen.

Nun muss die Karte ja auch noch in die einzelnen Posts. Das regeln wir mit einem kleinen Code-Schnipsel, der genau dort in die single.php eingefügt wird, wo der Kartenausschnitt angezeigt werden soll.

<?php $GLOBALS['wpMAPS']->show(); ?>

Also natürlich meist nach dem Inhalt des Blog-Beitrages. Dazu sucht man sich einfach die Stelle in der single.php wo folgender Code vorkommt:

<?php the_content(); ?>

Soll die Karte also nach dem Inhalt kommen, wird der wpMAPS Code von oben einfach danach eingefügt.

wpMAPS individueller

Um das ganze nicht ganz so langweilig aussehen zu lassen und um für dich als Blogger diesen Eyecatcher, die Karte, auch monetarisieren zu können, bauen wir einfach AdSense daneben. Ich löse das etwas altmodisch aber wirkungsvoll mit einer Tabelle, so hab ich den Vorteil, dass es immer sauber angezeigt bekomme.

Wir suchen uns also wieder die Stelle nach dem Content in der single.php und fügen folgenden Code ein (eine Erklärung kommt nach dem Code):

<?php $DEINFELDNAME= get_post_meta($post->ID, ‘DEINFELDNAME’, true); ?>

<?php if(!(empty($DEINFELDNAME))) { ?>

<p style=”text-align: center;”><script type=”text/javascript”><!–

google_ad_client = “pub-1111111111111111″;

/* 468×60, Erstellt 10.02.10 */

google_ad_slot = “1111111111″;

google_ad_width = 468;

google_ad_height = 60;

//–>

</script>

<script type=”text/javascript”

src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

</script></p>

<?php } else { ?>

<div class=”entry”><br><table style=”border-collapse: collapse” border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%” bordercolor=”#111111″>

<tbody>

<tr>

<td width=”300px”>

<div style=”float:left;”><script type=”text/javascript”><!–

google_ad_client = “pub-1111111111111111″;

/* 300×250, Erstellt 10.02.10 */

google_ad_slot = “1111111111″;

google_ad_width = 300;

google_ad_height = 250;

//–>

</script>

<script type=”text/javascript”

src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

</script></div>

</td>

<td width=”280px”>

<?php $GLOBALS['wpMAPS']->show(); ?>

</td>

</tr>

</tbody>

</table></div>

<?php } ?>

Also beginnen wir oben. Wir haben einen Ausschluss, das heisst, wenn du in deinem Blog-Posting im Benutzerdefinierten Feld als Name DEINFELDNAME (ROT)nimmst und im Wert irgendwas (völlig egal, hauptsache was drin) reinschreibst, wird einfach ein AdSense Block in der Größe 468x60px (BLAU) angezeigt. Existiert das Feld allerdings nicht, so wird das ausgegeben, was danach folgt.

Danach folgt eine Tabelle (GRÜN), weil ich die Breite meines Blogpostings voll nutzen möchte. In meinem Fall ist die nutzbare Breite 580px breit, wpMAPS hab ich so eingestellt, dass der Kartenausschnitt 280px breit ist, und 250px hoch. Links in der ersten Spalte der Tabelle wird ein AdSense-Block in der Größe 300x250px (SCHWARZ) dargestellt, in der rechten Spalte der Kartenausschnitt mit der Größe 280x250px (LILA).

Statt der Pixel-Angabe könnt Ihr auch eine %-Angabe vornehmen, dann aber muss man statt rechnen eben ausprobieren.

Ich hoffe das Ganze war jetzt einigermaßen verständlich, sonst freue ich mich auch Kritik, Fragen und ähnliches um dieses kleine Tutorial zu Google Maps in WordPress Postings zu editieren.