Yahoo! Maps AJAX API Basic Example

Der Code

Wie für fast alle Webservices benötigt Ihr auch für Yahoo! Maps eine AppID, die Ihr Euch auf dieser Seite von Yahoo! besorgen könnt (einen Yahoo!-Account vorausgesetzt): https://developer.apps.yahoo.com/wsregapp/. Danach könnt Ihr das benötigte JavaScript in den Header Eurer Seite einbauen:

<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.7&appid=AppID">
</script>

Anstelle von AppID müßt Ihr natürlich Eure eigene, ellenlange AppID einsetzen.

Ähnlich wie bei Google ist die AppID nur für eine Domain (inklusive Unterverzeichnisse — in meinem Fall also testbett.de gültig), um jedoch die Entwicklung zu vereinfachen, funktionieren alle AppIDs auch für file:/// und für localhost, so daß Ihr dafür keine eigene AppID registrieren müßt.

Der <body> der HTML-Seite sieht — wie bei fast allen Map-Anwendugen — ziemlich einfach aus:

#title "Yahoo! Maps AJAX API Basic Example"
#embedjavascript "ymbasics"

<h1><%= title %></h1>

<div id="map" style="width:480px;height:480px;"></div>

Die ersten beiden Zeilen sind RubyFrontier-Direktiven, die einmal den Titel der Seite festlegen (der dann auch per Makro <%= title %> in das HTML-Gerüst eingefügt wird) und zum anderen festlegen, daß ein weiteres JavaScript in den Header der Seite eingebunden wird. Und in diesem JavaScript liegt die ganze Power der Yahoo!-AJAX-API:

window.onload=function() {
	var map = new YMap(document.getElementById('map'));
	
	map.addTypeControl();
	map.addZoomLong();
	map.addPanControl();
	
	var point = new YGeoPoint(52.46174, 13.43724);
	map.drawZoomAndCenter(point, 3);
	
	var marker1 = new YMarker(point);
	marker1.addAutoExpand("Hallo Neubritz!");
	map.addOverlay(marker1);
}

Zuerst wird ein neues Map-Objekt erzeugt und dann die Controls hinzugefügt. Das TypeControl ist wie bei Google für die Kartentypen Karte, Hybrid und Satellit zuständig. Im Gegensatz zu Google sind die für die Navigationskontrolle zuständigen Controls geteilt. Einmal das ZoomControl, das (Überraschung!) für das Hinein- und Hinauszoomen verantwortlich ist und das PanControl, mit dem man die Karte in die vier Himmelsrichtungen verschieben kann.

Dann legen wir einen Punkt in geographischen Koordinaten fest (lat, lon) um dann die Karte an diesem Punkt mit der gewünschten Zoomstufe (in diesem Fall 3) zu zeichnen.

Nun wollen wir noch einen Marker, den wir als Overlay hinzufügen. Wie bei Google versteht auch bei Yahoo! der Marker (einfaches) HTML, so daß das Einbinden von Photos und das Hinzufügen von Links möglich sind.

Quellen