Google Maps – Der Crash-Kurs

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! 😉

Tobias Redel
Tobias Redel
Head of Professional Services

Tobias hat nach seiner Ausbildung als Fachinformatiker bei der Deutschen Telekom bei T-Systems gearbeitet. Seit August 2008 ist er bei NETWAYS, wo er in der Consulting-Truppe unsere Kunden in Sachen Open Source, Monitoring und Systems Management unterstützt. Insgeheim führt er jedoch ein Doppelleben als Travel-Hacker, arbeitet an seiner dritten Millionen Euro (aus den ersten beiden ist nix geworden) und versucht die Weltherrschaft an sich zu reißen.