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! 😉
Ich bin schon seit längerer Zeit sehr zufriedener User von Google Chrome auf dem Mac. Der Browser ist einfach schön schlank, läuft schnell und lässt sich mit ein paar wenigen Erweiterungen sinnvoll aufrüsten.
