Im folgenden eine kurze Anleitung zur Erstellung einer eigenen Blogmap mit GoogleMaps. Das Beispiel greift nur die grundlegendsten Möglichkeiten auf, mit ein bisschen Einarbeitung lässt sich die Karte beliebig erweitern.
Eine ausführliche Dokumentation der GoogleMaps API gibt`s hier:
http://www.google.com/apis/maps/
So sieht das Endergebnis aus:
http://blogmap.wordpress-deutschland.org/mapbeispiel.php
Längen- und Breitengrad
Punkte auf der Karte werden durch Längen- und Breitengrad angegeben. Längen- und Breitengrad eines Ortes kannst du bei Multimap.com abfragen. Breiten- und Längengrad müssen in Dezimalzahlen angeben werden! Die Dezimalangaben stehen bei Multimap.com in den Klammern!
Bevor du jetzt anfänst musst du dir zuallerst einen "Google Maps API key" besorgen:
http://www.google.com/apis/maps/signup.html
[COLOR="Red"]Ohne diesen Key kannst du keine Map anzeigen! [/COLOR]
Jetzt speichere das folgende Script (siehe auch Anhang) als "mapbeispiel.php":
<html>
<head>
<title>Eigene Blogmap mit GoogleMaps</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=DEIN_GOOGLEMAP_API_KEY" type="text/javascript"></script>
</head>
<body>
<div id='map' style='width: 100%; height: 350px'></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(11.0224, 50.9737), 12);
// Creates a marker whose info window displays the given number
function createMarker(point, number)
{
var marker = new GMarker(point);
// Show this markers index in the info window when it is clicked
var html = number;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
return marker;
};
// erster Eintrag
var point = new GPoint(13.4119,52.5238);
var marker = createMarker(point, '<a href="http://wordpress-deutschland.org/">Berlin</a><br/><br/>Hallo, ich bin eine Beschreibung!');
map.addOverlay(marker);
// zweiter Eintrag
var point = new GPoint(6.9599,50.9405);
var marker = createMarker(point, '<a href="http://wordpress-deutschland.org/">Köln</a><br/><br/>Hallo, ich bin eine Beschreibung!');
map.addOverlay(marker);
// dritter Eintrag
var point = new GPoint(11.5803,48.1391);
var marker = createMarker(point, '<a href="http://wordpress-deutschland.org/">Köln</a><br/><br/>Hallo, ich bin eine Beschreibung!');
map.addOverlay(marker);
//]]> </script>
</body>
</html>1. Schritt
Öffne die Datei in deinem Editor...
<script src="http://maps.google.com/maps?file=api&v=1&key=[COLOR="Red"]DEIN_GOOGLEMAP_API_KEY[/COLOR]" type="text/javascript"></script>
...und ersetze "[COLOR="Red"]DEIN_GOOGLEMAP_API_KEY[/COLOR]" mit deinem zuvor beantragten Key.
2. Schritt
Die Karte braucht einen [COLOR="Red"]Mittelpunkt[/COLOR] und einen [COLOR="SeaGreen"]Zoomfaktor[/COLOR], beides stellst du in der folgenden Zeile ein:
map.centerAndZoom(new GPoint([COLOR="Red"]11.0224[/COLOR], [COLOR="Red"]50.9737[/COLOR]), [COLOR="SeaGreen"]12[/COLOR]);
Für das Beispiel habe ich [URL="http://www.multimap.com/map/browse.cgi…ap=&scale=50000"]Erfurt[/URL] als Mittelpunkt gewählt und einen Zoomfaktor von [COLOR="SeaGreen"]12[/COLOR] angegeben. Die erste Angabe ist der [COLOR="Red"]Längengrad[/COLOR], die zweite der [COLOR="Red"]Breitengrad[/COLOR]. Welchen [COLOR="SeaGreen"]Zoomfaktor[/COLOR] du wählst bleibt dir überlassen.
map.centerAndZoom(new GPoint([COLOR="Red"]Längengrad[/COLOR], [COLOR="Red"]Breitengrad[/COLOR]), [COLOR="SeaGreen"]Zoomfaktor[/COLOR]);
3. Schritt
Im Beispiel habe ich drei Punkte eingetragen: Köln, Berlin und München. Jeder Eintrag ist gleich aufgebaut:
var point = new GPoint([COLOR="Red"]13.4119[/COLOR],[COLOR="Red"]52.5238[/COLOR]);
var marker = createMarker(point, '[COLOR="SeaGreen"]<a href="http://wordpress-deutschland.org/">Berlin</a><br/><br/>Hallo, ich bin eine Beschreibung![/COLOR]');
map.addOverlay(marker);
Um einen weiteren Beitrag hinzuzufügen, brauchst du lediglich diese drei Zeilen zu kopieren und unter dem letzten Eintrag einzufügen.
var point = new GPoint([COLOR=Red]Längengrad[/COLOR],[COLOR=Red]Breitengrad[/COLOR]);
var marker = createMarker(point, '[COLOR="SeaGreen"]BESCHREIBUNG[/COLOR]');
map.addOverlay(marker);
...das war`s auch schon! Wie gesagt, wenn du dich ein bisschen in die GoogleMaps API Dokumentation einliest, kannst du deine Karte beliebig erweitern. Um die Karte in dein Blog zu integrieren gibt es mehrere Möglichkeiten, du kannst zB ein Page-Template anlegen oder die Karte mit einem iframe anzeigen.
Ich hoffe das hilft erstmal weiter. Bitte stellt mir keine Fragen zum Feintuning, dafür gibt es die Dokumentation, Fachblogs und Newsgroups die sich ausschliesslich mit dem Thema beschäftigen.
So long,
Olaf