Neulich wollten wir eine Karte mit den Finalpositionen aller von uns gelegten, aktiven Caches erstellen (für das lokale Forstamt). Die Idee: auf einer Google Maps Karte alle Cache-Positionen mit Markern markieren.
Und wie macht man das? Nach kurzer Internetrecherche fanden sich diverse Seiten, die erklären, wie das geht. Die Umsetzung ist im Prinzip ganz einfach, da das ganze mit einer einzelnen HTML-Datei mit eingebettetem JavaScript realisierbar ist. Der Ablauf ist wie folgt:
- in der Datei ist eine Liste mit den Koordinaten der Caches hinterlegt
- diese wird mittels JavaScript eingelesen
- dann erzeugt das Script über die API von Google Maps die passende Karte mit Markern
- die Karte wird als HTML-Seite im Browser angezeigt
Der Code dafür sieht so aus:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geocaches - Görgeshausen - Blog-Demo</title>
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
html, body, #map-canvas { height: 100%; margin: 2px; padding: 2px }
h1 {font-size:16px; font-family:helvetica, arial, sans; padding: 2px; margin: 0px;}
p {font-size:14px; font-family:helvetica, arial, sans; padding: 2px; margin: 0px;}
</style>
<script type="text/javascript">
var LocationData = [
[50.394533, 7.957633, "Dosenshow: Matchstick Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png" ],
[50.39742, 7.95443, "Letterbox Alter Grenzstein", "http://maps.google.com/mapfiles/ms/icons/red-dot.png" ],
[50.39592, 7.94455, "Sommer, Sonne, Kaktus", "http://maps.google.com/mapfiles/ms/icons/red-dot.png" ],
[50.400167, 7.95755 , "Dosenshow: Weithalskanister", "http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
[50.39777, 7.94897, "Dosenshow: Mini Decon Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
[50.401667, 7.946717, "Dosenshow: Mun-Kiste", "http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
[50.405217, 7.942033, "Dosenshow: Nacro Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
[50.40527, 7.96688, "Dosenshow: Keep it clear Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
[50.3946, 7.9599, "(geplanter Cache)", "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"],
[50.3968, 7.9585, "(geplanter Cache)", "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"]
];
function initialize()
{
var map =
new google.maps.Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var i in LocationData)
{
var p = LocationData[i];
var latlng = new google.maps.LatLng(p[0], p[1]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: p[2],
icon: p[3]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.title);
infowindow.open(map, this);
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<h1>Caches im Görgeshäuser Wald</h1>
<p>rot=existent, blau=geplant</p>
<div id="map-canvas"></div>
</body>
</html>
Speichert man diese Datei lokal ab, z.B. als
meine_caches.html und öffnet die Datei im Webbrowser, sieht das ganze so aus:
 |
| aus dem Skript generierte Karte |
Wer das Listing oben inhaltlich nicht versteht und trotzdem eine eigene Karte erstellen möchte: keine Sorge, das geht trotzdem.
Angepasst werden muss dabei nur der Bereich
var LocationData = [...]. Dort befinden sich die Daten für die Marker.
Jeder Marker wird durch eine Zeile wie
[50.394533, 7.957633, "Dosenshow: Matchstick Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png" ]
dargestellt. Diese enthält, in eckige Klammern [ ] eingeschlossen:
- die Breitengrad-Koordinaten im Dezimalgradformat (1. Eintrag)
- die Längengrad-Koordinaten im Dezimalgradformat (2. Eintrag)
- den Namen des Caches (3. Eintrag)
- die Farbe des Markers (4. Eintrag).
Der Name des Caches (also der 3. Eintrag der Liste) wird auf der Karte immer dann angezeigt, wenn man mit dem Mauszeiger über den Marker fährt. Natürlich kann man hier auch jeden anderen, beliebigen Text hinterlegen.
 |
| Name des Caches wird angezeigt |
Die farbigen Marker sind im obigen Beispiel so gewählt, dass rote Marker die Position (unserer) existierenden Caches zeigen, blau die noch geplanten.
Wie man die Farben ein- und verteilt kann natürlich jeder selber bestimmten. Auf rot und blau (wie im obigen Beispiel) gibt es noch gelb (yellow-dot.png), lila (purple-dot.png) und grün (green-dot.png).
Die Cachekoordinaten, welche an erster und zweiter Position in der Liste stehen, müssen in Dezimalgrad (also z.B. 50.123456) angegeben werden und nicht in der beim Geocaching sonst üblichen Darstellung Grad mit Dezimalminuten (also z.B. 50° 12.345).
Die Umrechnung ist ganz einfach, auch ohne zusätzliche Tools (welche online aber reichlich vorhanden sind).
Zum Umrechnen nimmt man einfach die Dezimalminuten, teilt die Zahl durch 60. Das Ergebnis sind dann die Nachkommastellen für die Darstellung in Dezimalgrad.
Beispiel:
50° 21.345 wäre dann:
50 + 21.345/60 = 50 + 0,35575 = 50.35575
Wenn es sich beim Breitengrad im Süd-Koordinaten handelt und / oder beim Längengrad um West-Koordinaten, dann muss in der Dezimalgrad-Darstellung zusätzlich noch ein Minus-Zeichen davor (also wäre z.B. S 50°21.345 in Dezimalgrad -50.35575)
Somit steht einer eigenen Karte nichts mehr im Weg.
Sollten auf der Karte nach dem Aufruf die Marker fehlen, so ist in der Regel in der Liste der Caches ein Fehler. Dies könnte z.B. ein fehlendes Anführungszeichen oder ein fehlendes Komma sein.
