AhGeomap - Wrapper für Google Maps (beta)

Javascript Klasse zum Anzeigen von mehren Orten auf Google Maps

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.