Ich habe diese Woche ein paar Dinge mit der Google Maps API ausprobiert und bin begeistert! Auch wenn ich bei weitem kein Entwickler bin, ist das ganze Thema mit wenig Wissen in Sachen JavaScript locker zu bewältigen. Hierzu trägt unter anderem die fantastische Dokumentation bei von der sich wahrscheinlich jeder noch eine Scheibe abschneiden kann. Von einigen Tutorials für Leute die keine Ahnung haben (wie z. B. mich) bis hin zur detaillierten Beschreibung aller JavaScript Funktionen ist alles vorhanden.
Nun ein kleines Beispiel: Wir möchten einfach eine Seite erstellen auf der eine Google Maps Karte angezeigt und darin auf eine spezielle Adresse fokusiert wird.
Schritt 1: Einbinden der Google Maps API auf der Webseite
<html> <head> <title>Meine tolle Google-Maps Seite</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> </body> </html>
Schritt 2: Einbinden des JavaScript-Codes und laden der Karte
- Im DIV „map_canvas“ wird uns die Karte angezeigt
-
<body onload="initialize()">
sorgt für das laden der JavaScript Funktion
- Die Koordinaten innerhalb der initialize-Funktion (49.45394, 11.06361) sind der sogenannte Geocode, das Ziel der Anzeige
<html>
<head>
<title>Meine tolle Google-Maps Seite</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(49.45394, 11.06361);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Schritt 3: Hinzufügen von Markern
Wie man es aus Google Karten gewohnt ist, benötigt man nicht nur die Anzeige eines Ziels, sondern ebenso ein paar Informationen innerhalb der Karte. Dies funktioniert mit sogenannten Markern.
<html>
<head>
<title>Meine tolle Google-Maps Seite</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(49.45394, 11.06361);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
var infiwindow = new google.maps.InfoWindow({
content: "NETWAYS GmbH<br>Deutschherrnstrasse 15 - 19<br>90429 Nuernberg<br><br>Tel.: 0911-92885-0"
});
infiwindow.open(map,marker);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
PS: Wer zu faul ist den Text zu lesen und nachzuvollziehen, einfach den Code aus Schritt 3 in eine HTML-Datei kopieren, Geocode [Zeile 8] und Beschreibung [Zeile 22] abändern, fertig! 😉
Kann man auch ganz einfach ein GPX-File einbinden?
‚Ganz einfach‘ ist relativ – gpx ist ja ’nur‘ xml. Das müsste man dann in JavaScript einlesen und umwandeln.
GoogleEarth oder http://www.gpsvisualizer.com/ können dir die GPX files aber direkt in das Google Maps format umwandeln.