ogee.de

Yahoo! Maps

Der Kartenservice Yahoo! Maps bietet mit dem Yahoo! Maps Web Service die Möglichkeit eine Yahoo! Maps in die eigene Webseite zu integrieren. Dazu stehen 4 unterschiedliche API`s zur Verfügung:

Beispiel 1: Yahoo Map mit der JS-Flash API in eine Website einbinden

Um eine Yahoo Map in eine Website zu integrieren benötigt man zunächst eine Application ID. Diese bekommt man nur, wenn man sich zuvor für eine Yahoo ID angemeldet hat. Die erworbene Application ID muß dann in den Code eingefügt werden.

Beispiel 1: Die Karte ist auf Deutschland ausgerichtet, enthält einen Marker mit Info-Fenster und die Widgets zum Navigieren und verändern der Kartenansicht.

Im folgenden der Code zu Beispiel 1 mit Erläuterungen (Update 08.10.2008):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript"
src="http://maps.yahooapis.com/v3.5.2/fl/javascript/apiloader.js?appid= DEINE APPLICATION ID">
</script>
<style type="text/css">
#mapContainer {
height: 400px;
width: 600px;
}
</style>
</head>
<body>
<h1>Yahoo! Maps Beispiel</h1>
<div id="mapContainer"></div>
<script type="text/javascript">
// Breiten- und Längradangaben für das Objekt
var latlon = new LatLon(51.244047, 9.747175);
// Application ID einfügen und Karte anzeigen mit Zoom Level 13
var map = new Map("mapContainer", "Application ID", latlon, 13);
// Karte beweglich machen
map.addTool( new PanTool(), true );
// Navigator Widget erstellen
navWidget = new NavigatorWidget();
// Navigator Widget zur Karte hinzufügen und anzeigen
map.addWidget(navWidget);
// POI marker erstellen
marker1 = new CustomPOIMarker( 'Marker 1', 'Einfaches Marker Beispiel',
'Marker 1', '0xFF0000', '0xFFFFFF');
// Marker Koordinaten
var meinmarker1 = new LatLon(51.244047, 9.747175);
// POI marker sichtbar in der Karte anzeigen
map.addMarkerByLatLon( marker1, meinmarker1);
// Kartenansicht Widget hinzufügen
map.addWidget(new SatelliteControlWidget());
</script>
</body>
</html>

Yahoo! Maps Links:

Yahoo! Maps Mashups:

zurück zur Startseite...

Über mich - Impressum & Hinweise - Kontakt
Die Inhalte auf ogee.de sind unter einer Creative Commons-Lizenz lizenziert
ogee.de - valid xhtml & css