Google Maps Karte einbinden (Teil 1)
Ich wollte meine Beiträge zu den Geocaching - Touren, die wir so machen, mit eine Grafik der gelaufenen Wege anhübschen. Google Maps bietet dazu gute Möglichkeiten, man braucht nicht viel, nur einen Google-Maps-API Key, und eine Seite, auf der die Tracks aufgebaut werden. Diese Seite integriert man dann einfach in den Beitrag per IFrame oder verlinkt sie, fertig.
Als Referenz für diese Artikelreihe sollen folgende Quellen dienen:
Zunächst braucht man also eine einfache HTML-Seite, die die Karte ausliefert. Der grobe Rahmen sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Google Maps</title>
<script src="jquery.js"></script>
<script src="jquery.xpath.js"></script>
<script src=".../maps?file=api&v=2&key=xxx">
</script>
<script type="text/javascript">
var map;
function initialize() {
if (GBrowserIsCompatible()) {
//hier gehts weiter
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width:500px;height:500px;">
</div>
</body>
</html>
Eingebunden werden die Hauptbibliothek von JQuery, das XPath Plugin (werden später benötigt) und die Google Maps API.
Dieser Artikel zeigt zunächst einige kurze Beispiele für Google Maps (siehe dazu auch die Developer Guide, dort sind Beispiele für die einzelnen Funktionen angegeben). Der Code kann einfach oben an die Stelle “hier gehts weiter” reinkopiert werden - die Datei kann man lokal einfach abspeichern und öffnen, dafür wird noch kein Google API Code benötigt:
Map anlegen, bei Köln zentrieren und Maßstab festlegen (Zoom gibt quasi den Maßstab an, hohe Zahlen ist weiter weg, kleine Zahlen nah dran)
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(50.889391,6.977005));
map.setZoom(13);
Karte auf Satellitenansicht umstellen und einige Controller hinzufügen
map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setMapType(G_SATELLITE_MAP);
Marker hinzufügen
marker=new GMarker(new GLatLng(50.892802,6.96722)) map.addOverlay(marker);
Linie zwischen zwei Punkten (Luftlinie von mir zuhause bis in die Innenstadt)
var polyline = new GPolyline([
new GLatLng(50.864803, 7.003784),
new GLatLng(50.936255, 6.959152)
], "#ff0000", 10);
map.addOverlay(polyline);
Mit dem Werkzeug an der Hand ist es eigentlich schon fast fertig. Jetzt könnte man für jede Tour eine solche Seite anlegen, und alle Wegpunkte in eine GPolyline (dem Konstruktur wird ein Array von Punkten übergeben, es kann also eine beliebig lange Linie erzeugt werden) hinzufügen.
Einfacher wäre natürlich, wenn man die GPX-Datei, die von den meisten Navis erzeugt werden, irgendwie direkt einbinden könnte. Dafür braucht man aber etwas Anwendungslogik: Die GPX-Datei muss eingelesen werden und in ein Google-Maps lesbares Format umgewandelt werden (also zum Beispiel in eine Reihe von GLatLng Punkten, oder in eine enkodierte Version dieser Punktmenge). Wie man das machen kann (mithilfe einer kleinen Java-Applikation und JQuery) zeige ich in dem nächsten Artikel.
Hier die oben aufgebaute Beispielseite, eingebunden im IFrame:
Diese Seite könnt ihr auch hier aufrufen, und Euch dort den Source ansehen. Dort ist der API Key von geocologning.de eingebunden, dieser funktioniert natürlich nur unter meiner Domain.
Juni 21st, 2008 at 22:00
hi,
sieh mal hier: http://www.matusz.ch/blog/projekte/xml-google-maps-wordpress-plugin/
das plugin macht eigentlich genau da, was du suchst…