Axels Webseite

AhGeomap - Wrapper für Google Maps

Javascript Klasse zum Anzeigen von mehren Orten auf Google Maps

Steckbrief :: ahGeomap

Wrapper für Google Maps

Typ:
Klasse
Download:
Github: Zip (7 kB)
Source:
Github
Dokumentation:
Axels Docs (en)
Die Klasse dient der Darstellung einer Karte mit Google Maps. Sie zeigt den eigenen Standort und verbindet mit Linien vorgegebene Orte. So kann man z.B. seine Ferien-Destinationen der letzten Jahre darstellen.

Lizenz:
  • GNU GPL v3 (Opensource)

Einleitung

Für meine Diashow möchte ich Orte anzeigen können, wo die Fotos entstanden. So entstand diese Javascript-Klasse.

Ich erzeuge damit eine Karte mit Google Maps und kann darin Orte anzeigen und zur Orientierung mit je einer Linie zum aktuellen Standort verbinden. Die Karte kann man zoomen und die einzelnen Orte zentrieren.

Einbindung in die Webseite

In seine Webseite sind Javascripts von Google Maps und die Klasse zu laden.

Die Karte wird mit dem Namen eines DIVs initialisiert. Die Karte füllt jenes DIV komplett aus. Das DIV kann man mit CSS formatieren und so die Grösse der Karte festlegen.

Eine Minimal-Variante sieht so aus: dies lädt die Karte mit Zentrierung auf die eigene Position.

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="/javascript/ahgeomap.class.js"></script>
</head>
<body>

	<div id="map" style="width: 600px; height: 450px;">
		<div id="map_canvas"></div>
	</div>

	<script>
		var oMap = new ahgeomap("map_canvas");
		oMap.getCurrentPosition();
		oMap.showMap();
	</script>

</body>
</html>

In der Demo-Seite sind weitergehende Funktionen beschrieben.

Der Link zur Dokumentation findest Du ebenfalls in der rechten Spalte.