Google Map Tutorial

Die Google Map Anwendung bietet viele Möglichkeiten, dem User auf der eigenen Website Services zur Verfügung zu stellen, die speziell auf deren Inhalt zugeschnitten sind. Für Anfahrtsskizzen und Wegbeschreibungen gibt es verschiedene Darstellungsmöglichkeiten. Dieses Tutorial auf Complett-Service.de zeigt Schritt für Schritt, wie eine Google Maps Anwendung erstellt wird.

Landkarten waren sozusagen Vorläufer der Google Map API.

Die Vorläufer der Google Map, Landkarten und Straßenkarten, lösten schon damals heftige Diskussionen aus. – © Egon Steiner Bundesarchiv via Wikimedia

Bei der Google Maps-Anwendung handelt es sich um ein ziemlich ausgereiftes und mächtiges Plugin für eine Website. Die Anwendung hat viele tolle Features und wird fortlaufend weiterentwickelt. Sie bietet für verschiedene Einsatzzwecke wie Anfahrtsskizzen zum Veranstaltungsort oder einer Sehenswürdigkeit bis hin zur  Wegbeschreibung zum Ladengeschäft unterschiedliche Möglichkeiten der Visualisierung wie Straßenkarte, Satellitenkarte oder Hybriddarstellung.

Voraussetzungen für dasTutorial zur Google Map

Dieses Tutorial zur eigenen Google Map wurde im Zusammenhang mit einem Projekt für eine Foto-Website entwickelt. Neben ein paar grundlegenden Erklärungen, die natürlich auch in anderen Anleitungen zu finden sind, auch bei Google selbst (siehe Link oben), gehe ich auf folgende Problemstellung näher ein:

Es ist eine Googlemap für Berlin zu erstellen, auf der Standorte von Fotos eingetragen sind (mit Markern). Jeder Google-Map-Marker repräsentiert einen Aufnahmeort für ein Foto (Marker).

  • Durch Klick auf den Google-Map Marker wird ein Info-Fenster angezeigt, auf dem sich eine Miniaturabbildung des Fotos befindet, ggf. mit Kurzinfo (Info, Copy, Zeit usw.). Diese Daten werden automatisch (Tutorial Teil 3) generiert beim Erstellen der Karte, sind also in einer Datenbank vorzuhalten. Dort können die Daten bei Bedarf leicht editiert werden. Außerdem soll bei einem Klick auf das Foto die dazugehörige Galerie-Website aufgerufen werden (z. B. http://meinedomain.com/fotomotiv /).
  • Die Google Maps-Anwendung soll ganze Website ausfüllen, soll aber auch auf Smartphones ansprechend dargestellt werden (? Steuerung, evtl. aufteilen ?).

Diese Bemerkungen habe ich an den Anfang gestellt, damit du zu Beginn des Tutorials entscheiden kannst, ob es für dich persönlich nützlich ist und dir bei der Lösung eigener Probleme weiterhelfen kann.

Anlegen der Dateien für die eigene Google Map unter NetBeans-IDE

Dieses Beispiel wurde mit NetBeans entwickelt, aber auch andere Editoren wie Notepad++ sind geeignet. NetBeans hat den Vorteil, dass es schon diverse Templates für die jeweiligen Dateitypen bereitstellt und auch Code-Ergänzung (intellisense) unterstützt. Aber auch ohne spezielle NetBeans Features solltest du die einzelnen Schritte nachvollziehen können.

Ich verwende die PHP-Ausführung der NetBeans-IDE.

  • Starte NetBeans und lege dort ein neues Projekt an. Ich nenne mein Projekt erstmal „Tutorial Google Map“. Die Datei „index.php“ wird automatisch angelegt, die das Projekt aufnehmen wird. Du kannst diese Datei aber auch in „index.html“ umbenennen und die leeren php-Tags entfernen.
  • Dann solltest du noch in den Projekteigenschaften (Rechtsklick auf das Projekt) unter „Run Configuration“ „Index-File“ auch auf „index.html“ ändern. Die „index.php“ (oder die umbenannte Datei) enthält zu Beginn das Grundgerüst einer ganz normalen HTML-Datei. Sie enthält deshalb auch einen „head“-Bereich, in dem externe Dateien eingebunden werden.
  • Im Projektbereich von NetBeans klicke ich mit rechts auf den Ordner „SourceFiles“ und lege zwei neue Verzeichnisse an: „css“ und „js“. Diese Verzeichnisse nehmen meine externen Dateien auf, nämlich die Stylesheet-Datei „styles.css“ und für eventuelle eigene Javascript-Funktionen die Datei „googlemap.js“. Auch diese Dateien können über einen Rechtsklick auf das jeweils neu angelegte Verzeichnis aufgerufen werden. Alle diese Vorgänge können auch über das Menü „Datei | Neue Datei…“ gesteuert werden.
  • Da ich die Google Map später in ein WordPress-Projekt einfügen möchte, genügt mir im Bodybereich ein simpler „DIV“-Container, der die Google Map aufnimmt. Dies geschieht auch in Anlehnung an das Google-Tutorial. Desweiteren wird die Datei für die Verwendung des Google Maps API V3 von der URL „http://maps.google.com/maps/api/js“ eingebunden. Da ich im Augenblick mit keinem Gerät arbeite, das GPS-Daten liefert, setzte ich den Parameter „sensor“ auf „false“ (siehe auch Googletutorial).
  • Binde  die Dateien in den „head“-Bereich der „index.html“ ein. Die Datei „index.html“ sollte nun in etwa so aussehen wie es im folgenden Listing beschrieben ist:
Listing 1:
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv=„Content-Type“ content=„text/html; charset=UTF-8“>
  5.         <link type=„text/css“ rel=„stylesheet“ href=„css/styles.css“ />
  6. <script type=„text/javascript“ src=„https://maps.google.com/maps/api/js?sensor=false“>
  7. </script>
  8.         <script src=„js/mymaps.js“ type=„text/javascript“></script>
  9.         <title>Meine Google Map</title>
  10.     </head>
  11.     <body>
  12.         <div id=„mygooglemap“>
  13.         </div>
  14.     </body>
  15. </html>

Einfaches Beispiel der eigenen Google Map Anwendung

Für den ersten Versuch ermittle ich nun noch den Aufnahmeort für eine Foto aus einer Google Map. Das heißt, ich benötige für die Geoposition Longitude = Längengrad und Latitude = Breitengrad. Diese Werte kannst du ganz einfach ermitteln, indem du auf den entsprechenden Ort mit rechts klickst und im Kontextmenü „was ist hier“ wählst. Ein grüner Pfeil wird in der Map angezeigt. Durch Anklicken des Pfeils öffnet sich ein Info-Fenster, dem du die Werte für Longitude und Latitude entnehmen kannst.

Gib nun folgenden Code in die zuvor angelegte JavaScript-Datei „mymap.js“ ein:

Listing 2:
  1. function initialize() {
  2.   var myLatlng = new google.maps.LatLng(52.476403, 13.320036);
  3.   var myOptions = {
  4.     zoom: 11,
  5.     center: myLatlng,
  6.     mapTypeId: google.maps.MapTypeId.ROADMAP
  7.   }
  8.   var map = new google.maps.Map(document.getElementById(„mygooglemap“), myOptions);
  9. }
  10. window.onload = initialize;

Ist die Datei z. B. „googlemap.html“ geladen, wird die Funktion „initialize()“ durch „winonload“ aufgerufen.
In der Funktion „initialize()“ wird in Zeile 8 ein Google Maps-Objekt mit speziellen Eigenschaften (myOptions) in einem „DIV“-Container (mygooglemap) erzeugt. Wie in der Referenz dokumentiert ist, sind beim Objekt MapOptions (myOptions) drei Eigenschaften zwingend vorgesehen.
Die benötigten Werte sind:

  1. die Geolocation-Daten mit den Werten für Longitude und Latitude (center), um damit die Karte zu zentrieren,
  2. die Voreinstellung für den Kartenausschnitt (zoom) und
  3. die Eigenschaft des Google Map Types (mapTypeId). In meinem ersten einfachen Versuch arbeite ich auch mit genau diesen Eigenschaften.

Die erste Google Map Anwendung anhübschen

Um die Google Map Anwendung nun auch sichtbar zu machen, muss ich noch die Stylesheet-Datei „styles.css“ vervollständigen. Das mache ich wie bei eigenen Google-Beispielen und setzte nur die benötigten Styles, aber dann gleich auf 100 % ;-)
Füge nun den im folgenden Listing geschriebenen Code in die Datei „styles.css“ ein.

Listing 3:
  1.  html { height: 100% }
  2.  body { height: 100%; margin: 0px; padding: 0px }
  3.  #mygooglemap { height: 100% }

Wenn du alles gespeichert hast und in NetBeans auf das grüne Startdreieck klickst, wird hoffentlich eine, wenn auch rudimentäre, Google Map angezeigt. Die Google Map bringt aber schon einige Features von Haus aus mit. Da wären z. B. ein Control für den Zoomfaktor, Wahlmöglichkeiten für den MapType (Satellit, Hybrid, Karte), das Verschiebungs-Control und das Männchen als Street View-Symbol.

Google Map mit Marker versehen

Auf dieser Googlemap soll nun, wie zuvor beschrieben, für jeden Aufnahmeort eines Fotos bzw. einer Fotogruppe ein Google Makierungs-Pin gesetzt werden. Auch hier werde ich zunächst mit Standardwerten arbeiten, d. h. Ich verwende den Google-Standard-Marker, bevor ich mein eigenes Marker-Symbol entwerfe und einfüge.

Makierungen auf Straßenkarte

Von der Hardware zur Software oder vom Straßenplan zur Google Map.

Beim Erzeugen eines Markers muss ein MarkerOptions-Objekt übergeben werden, das zumindest die Position des Google Map Markers mit den Werten für Longitude und Latitude enhält. In diesem Beispiel wäre es auch sinnvoll, dem Marker mitzuteilen, auf welcher Google Map er erscheinen soll. Für den Titel des Markers wähle ich eine aussagekräftige Bezeichnung. Da mein Marker den Aufnahmeort von Fotos repräsentieren soll, nenne ich ihn „Poller-Parade“. Dieser Titel wird später durch ein Info-Fenster ersetzt. Im folgenden Listing wird der Code der JavaScript-Datei durch den Code für den Marker ergänzt. Gleichzeitig wird das Zentrum der Karte in etwa auf die Mitte gesetzt (ich wähle die Stadtmitte: hier von Berlin).

Listing 4:
  1. function initialize() {
  2. var myLatlng = new google.maps.LatLng(52.520974, 13.409368); //zentriet
  3. var myOptions = {
  4. zoom: 11,
  5. center: myLatlng,
  6. mapTypeId: google.maps.MapTypeId.ROADMAP
  7. }
  8. var map = new google.maps.Map(document.getElementById(„mygooglemap“), myOptions);
  9. var pollerLatlng = new google.maps.LatLng(52.487889, 13.372074);//Poller
  10. var marker = new google.maps.Marker({
  11. position: pollerLatlng,
  12. map: map,
  13. title:„Bunte Poller Parade“
  14. });
  15. }
  16. window.onload = initialize;

Nach dem gleichen Muster kannst du in diesem Abschnitt der Datei weitere Marker in die Google Map einfügen und diese auch animiert anzeigen. Du hast hier die Möglichkeit, die Markierungen auf die Markierungsort mit einem kleinen Hüpfer fallen zu lassen bzw. die Makierung durch den Marker wird durch ständiges Hüpfen verstärkt.
Über das MarkerOption-Objekt fügst du dem Marker eine entsprechende Eigenschaft „animation: google.maps.Animation.DROP“ hinzu.

Der Marker der Google Map bekommt ein Standard-Info-Fenster

Bei meinem Googel Map-Service möchte ich den Nutzern die Möglichkeit bieten, zu einem bestimmten Aufnahmestandort, der durch einen Marker definiert ist, das dort entstandene Foto in Symbolformat mit entsprechender Kurzinformation zu zeigen. Bei einem Klick auf dieses Foto soll auf die entsprechende Galerie verlinkt werden.
Um ein Info-Fenster für den Marker anzuzeigen, musst du zuerst ein neues „InfoWindow“-Objekt erzeugen, dem du ein „InfoWindowOptions“-Objekt übergibst. Dieses kann direkt als Objekt-Literal übergeben werden oder, wie schon in den anderen Codeteilen, über eine Variable.
Den InfoWindowsOptions kannst du z. B. wie im Listing 5 beschrieben, den Inhalt als String übergeben. Der String enthält den HTML-Code, der z. B. einen DIV-Container darstellt. Eine weitere Eigenschaft kann das „pixelOffset“ sein, mit dem du die Sprechblase, ausgehend vom Marker, verschieben kannst. Mit „maxWidth“ kannst du die maximale Sprechblasenbreite angeben. Achte dabei aber auf die richtige Reihenfolge der Elemente!
Desweiteren kannst du die Position der Sprechblase angeben. Hier übergibst du wieder „Longitude“ und „Latitude“ an „position“. Wird die Sprechblase in Verbindung mit einem Marker verwendet, wird die Position des Markers verwendet.

Für das Info-Fenster ersetzt du den Code der „initialize“-Funktion der Javascript-Datei mit folgenden Code:

Listing 5:
  1. function initialize() {
  2. var myLatlng = new google.maps.LatLng(52.520974, 13.409368); //zentriet
  3. var myOptions = {
  4. zoom: 11,
  5. center: myLatlng,
  6. mapTypeId: google.maps.MapTypeId.ROADMAP
  7. }
  8. var infowindow = new google.maps.InfoWindow();
  9. var contentString = ‚<div id=“infoContent“>‘+
  10. ‚<header><h1 id=“firstHeading“ class=“firstHeading“>ZOOM-Berlin.de</h1>‘+
  11. ‚</header><section><a href=“http://zoom-berlin.de/berlin-poller/“>‘+
  12. ‚<img src=“http://zoom-berlin.de/wordpress/wp-content/uploads/Poller-Strip.jpg“ ‚+
  13. ‚width=“102″ height=“27″ title=“Poller-Parade“ /></a></section>‘+
  14. ‚<footer><h3 id=“infofootertext“>zoom-berlin</h3></footer>‘+
  15. ‚</div>‘;
  16. infowindow.setOptions({
  17. content: contentString
  18. });
  19. var map = new google.maps.Map(document.getElementById(„mygooglemap“), myOptions);
  20. var pollerLatlng = new google.maps.LatLng(52.487889, 13.372074);//Poller
  21. var marker = new google.maps.Marker({
  22. position: pollerLatlng,
  23. map: map,
  24. title:„Bunte Poller Parade“
  25. });
  26. google.maps.event.addListener(marker, ‚click‘, function() {
  27. infowindow.open(map,marker);
  28. });
  29. }

Bei diesem Beispiel habe ich nur der Eigenschaft „content“ von „infoWindow“ einen „DIV“-Container übergeben. Das geschieht hier in Form eines Strings, der das „HTML“-Element darstellt.
Außerdem habe ich die CSS-Datei ergänzt, damit ich die innere Struktur des Infofensters sehe (verschiedene Farben). Dies wird am Ende dieses Google Map Tutorials noch einmal angepasst.

Statische Ergänzungen der eigenen Google Map mit Foto-Aufnahmeorten

In diesem ersten Teil des Tutorials geht es um grundsätzliche Funktionen von Google Maps, die ich für ein aktuelles Projekt benötige. Diese sind:

  • Google-Maps in Website einbinden,
  • Marker setzen und
  • Info-Fenster anzeigen.

Zum Ende dieses Teils werde ich mein Google-Map-Beispiel nur noch um einige statische Werte für Marker ergänzen.
Auf einer Google Map können auch mehrere Marker sein. Mit zunehmender Anzahl von Markern auf einer Website steigt jedoch der Aufwand, dies alles händisch zu pflegen und in den Quellcode zu schreiben. Auch die Übersichtlichkeit leidet darunter. Es wäre daher sinnvoll, dafür zumindest eine einfache Datenbank (z. B. Textdatei) zu haben. Dort könnten schneller Änderungen und Ergänzungen vorgenommen werden. Da der Code nur um gleiche Elemente ergänzt wurde, werde ich diesen hier nicht noch einmal anführen, sondern habe diesen in das Download-Zip-File gepackt.
Fügst du mehrere Marker in eine Google Map ein, werden die Info-Fenster solange angezeigt, bis du es wieder schließt. Möchtest du nur immer ein Info-Fenster geöffnet haben, kannst du den unten aufgeführten Code einfügen.
Es wird hierbei geprüft ob schon ein InfoWindow existiert, und wenn ja, wird dieses geschlossen. Danach wird das aktuelle Window geöffnet.

Listing 6:
  1. //Den Markers wir ein Infofenster angefügt, wenn ein Infofenster existiert wird es gechlossen
  2. var infoFenster;
  3. google.maps.event.addListener(marker, ‚click‘, function() {
  4. if(infoFenster){
  5. infoFenster.close();
  6. }
  7. infowindowPoller.open(map,marker);
  8. infoFenster=infowindowPoller;
  9. });

Ersetze auch noch den Code der CSS-Datei bzw. verändere diesen nach den Vorgaben deiner eigenen Vorstellung. Füge folgenden Beispiel-Code in die CSS-Datei ein:

Listing 7:
  1. *{padding: 0; margin: 0;}
  2. html { height: 100% }
  3. body { height: 100%; margin: 0px; padding: 0px }
  4. #mygooglemap {background:#666;width:96%; height: 560px; padding: 2%; }
  5. #infoContent{background: #fff; width: 100%; height: 100%;}
  6. #infoContent header{background: #fff; padding: 5px 2px 3px 2px;border:1px solid #ccc; -webkit-border-radius: 6px;
  7. -moz-border-radius: 6px;
  8. border-radius: 6px; margin:6px;}
  9. #infoContent img{background: #fff; padding: 2px 5px ;}
  10. #infoContent footer{background: #fff;height: 20px; position: relative;padding: 5px 2px 3px 2px;border:1px solid #ccc; -webkit-border-radius:6px;
  11. -moz-border-radius:6px;
  12. border-radius:6px; margin:10px; color:#262626;}
  13. #infofootertext{top: 2px;}
  14. #infoContent footer h3{position: absolute;}

…und wer nicht gerne abschreibt …

Daten für die eigene Google Map aus XML-Datei einlesen

Wie du in den vorangegangen Kapitel gesehen hast, ist das Erstellen einer eigenen Google Map mit Markierungen erst einmal kein Hexenwerk. Beim Schreiben von Quellcode muss man immer konzentriert vorgehen und doch hat sich schnell ein Fehler eingeschlichen, der auch mal zu unbekannten Phänomenen führen kann. Deswegen ist es einfacher, wie im vorliegenden Fall, wiederholende Angaben in einer Schleife abzuarbeiten und nicht für jeden Marker immer wieder den gleichen Quellcode einzufügen.
Für die Realisierung dieser Aufgabe stehen, wie meistens, mehrere Möglichkeiten zur Verfügung. Ich habe mich für JavaScript-JQuery entschieden, das vom Server eine XML-Datei lädt, ausliest und damit die Google-Map erstellt.

Welche Daten werden für die Google Map benötigt

Bei meinem Projekt werden auf einer eigenen Google Map Aufnahmeorte von Fotos angezeigt. Diese Google Karte soll um weitere Standorte einfach erweitert werden können. Dies soll aber nicht mehr direkt im Quellcode gemacht werden. Zuerst müssen die Daten festgelegt werden, auf die über die Google Map zugegriffen werden soll.
Zur Erinnerung: Klick auf einen Marker in der Google-Karte,werden in einem Infofenster ein Titel, eine Beschreibung und ein Bild mit einem Link auf eine Fotogalerie angezeigt. Diese Daten können natürlich in anderen Projekten wieder abgewandelt oder ergänzt werden.
Die oben genannten Daten sind die variablen Daten der Google-Karte, die sinnvoller Weise eingelesen werden. Andere Daten können nach wie vor als feste Konstanten im Quellcode angelegt werden. Dies sind z. B. die Kartengröße, Standort und Zoomfaktor der Google-Map.

Anlegen einer wohlgeformten XML-Datei für die eigenen Google Map Marker

Nachdem die benötigten Daten festgelegt wurden, kann die Konstruktion der XML-Datei beginnen. Der Einfachheit halber habe ich das XML-Gerüst für nur einen Marker erstellt, da sich diese innerhalb der Datei und innerhalb des Tags „mapmarker“ wiederholen. Dabei werden nur die Attribute und Werte geändert.

Listing 8:
  1. <?xml version=„1.0“ encoding=„UTF-8“?>
  2. <mapmarker>
  3. <marker id=„berliner-mauerbilder-1980-1989“ title=„Mauerbilder Potsdammer Platz“>
  4. <description>Mauerbilder Potsdammer Platz</description>
  5. <latitude>52.509407</latitude>
  6. <longitude>13.376690</longitude>
  7. <image>mauer.jpg</image>
  8. </marker>
  9. </mapmarker>

Aus der XML-Datei werde ich folgende Werte auslesen: das Attribut „title“ und die Werte der Tags „description“, „latitude“, „longitude“ und image. Die Werte „latitude“ und „longitude“ enthalten die Position des jeweiligen Markers in der Google Map. Als nächster Schritt folgt die Erstellung der JavaScript-Datei.

Warum bei der eigenen Google Map JQuery und nicht direkt JavaScript verwenden?

Die JavaScript JQuery-Library hat unbestritten den Vorteil, dass sie in der Lage ist, das Volumen des eigenen Codes zu minimieren und damit möglicherweise diesen auch stabiler zu machen. Außerdem hat diese Bibliothek den Vorteil der weiten Verbreitung. Sie ist in vielen Anwendungen und Plugins schon vorhanden.
Hier verwende ich z. B. JQuery für den Zugriff auf eine XML-Datei, die auf dem Server liegt, und das Auslesen derselben. Durch das Verwenden der Jquery-Funktionen wird der Code auch recht übersichtlich und einfach. Wie du im folgenden Listing sehen kannst, verwende ich für das Abrufen der Serverdatei die JQuery-Funktion „$.get()“.
$.get(„data.xml“, function(MarkerArray){ … }
liefert mir die Datei„data.xml“ in der Variablen „MarkerArray“ zurück.
Auf die Variable MarkerArray wende ich dann die folgenden JQuery-Funktionen „find“ und „each“ an:
$(MarkerArray).find(„marker“).each(function(){ //…. }

Die XML-Datei enthält dieverse „marker“-Elemente, die in der obigen Funktion ermittelt werden. Für jedes dieser Elemente (each) wird eine Funktion ausgeführt, die diese Elemente in der Google Map verfügbar macht. Dazu mehr nach dem Listing.

Listing 9:
  1. function initialize() {
  2. var myLatlng = new google.maps.LatLng(52.520974, 13.409368); //zentriet
  3. var myOptions = {
  4. zoom: 11,
  5. center: myLatlng,
  6. mapTypeId: google.maps.MapTypeId.ROADMAP
  7. }
  8. //Map
  9. var map = new google.maps.Map(document.getElementById(„mygooglemap“), myOptions);
  10. // die XML-datei einlesen und in der Variablen ‚MarkerArray‘ speichern
  11. $.get(„data.xml“, function(MarkerArray){
  12. infoFenster=„“;
  13. // suche nach jedem (each) „marker“-Element
  14. $(MarkerArray).find(„marker“).each(function(){
  15. // $(this) enthält den jeweiligen Marker der in „$myMarker“ zwischengespeichert wird.
  16. var $myMarker = $(this);
  17. // für das bessere lesen sind die Daten nochmals in Variablen abgelegt
  18. var id = $myMarker.attr(„id“);
  19. var title = $myMarker.attr(„title“);
  20. var description = $myMarker.find(„description“).text();
  21. var image = $myMarker.find(„image“).text();
  22. var longi = $myMarker.find(„longitude“).text();
  23. var latit = $myMarker.find(„latitude“).text();
  24. // das Marker-Info-Fenster
  25. var info = ‚<div id=“infoContent“>‘+
  26. ‚<header><h3>‘+title+‚</h3>‘+
  27. ‚</header><section><a href=“http://zoom-berlin.de/‘+id+‚/“>‘+
  28. ‚<img src=“http://zoom-berlin.de/wordpress/wp-content/uploads/manuell/‘+image+‚“ ‚+
  29. ‚width=“225″ height=“50″ title=“‚+title+‚“ /></a></section>‘+
  30. ‚<footer><h4 id=“infofootertext“>‘+description+‚</h4></footer>‘+
  31. ‚</div>‘;
  32. var infowindow = new google.maps.InfoWindow({
  33. content:info
  34. });
  35. // Marker wird der Map zugefügt
  36. var marker = new google.maps.Marker({
  37. position: new google.maps.LatLng(latit, longi),
  38. map: map,
  39. title:title
  40. });
  41. //für das Öffnen und Schließen der Marker-Infofenster
  42. google.maps.event.addListener(marker, ‚click‘, function() {
  43. if(infoFenster){
  44. infoFenster.close();
  45. }
  46. infowindow.open(map,marker);
  47. infoFenster=infowindow;
  48. });
  49. });
  50. });
  51. }
  52. window.onload = initialize;

Zeilen 1 bis 8: Hier findest du Code, der schon im Abschnitt „Einfaches Beispiel einer eigenen Google Map-Anwendung“ erläutert wurde. Er erzeugt eine neue Gogle Map für einen bestimmten Ort mit einer bestimmten Größe und Zoomfaktor.
Zeilen 12 bis 16: Siehe Erklärung oberhalb.
Zeile 17: Jedes Marker-Element wird gecached.
Zeilen 19 bis 24: Zur besseren Übersicht werden die ausgelesenen Werte zwischengespeichert. Für das Auslesen der Attribute wird die JQuery-Funktion „attr()“ verwendet. Mit der JQ-Funktion „find(‚TAGNAME‘).text()“ wird nach dem angegebenen „Tag“ gesucht und dann der Text ausgelesen.
Zeilen 26 bis 35: Die ausgelesen Werte werden benutzt, um das jeweilige Infofenster für die Marker zu bauen.
Zeilen 37 bis 41: In diesem Abschnitt des Quellcodes wird ein neuer Marker erzeugt, wobei die ausgelesen Werte aus Zeile 23 und 24 die Position festlgen.
Zeilen 43 bis 48: Auch diese Zeilen dürften weitgehend selbst klärend sein. Hier wird jedem Marker noch ein Event hinzugefügt, der zunächst prüft, ob ein Infofenster geöffnet ist, das er in diesem Fall schließt. Danach wird das oben erzeugte Infofenster geöffnet.

Hinweis:
Wer mit dem Firefox-Browser arbeitet, dem sei für die Fehlersuche das Plugin „FireBug“ nahegelegt, das für die Fehlersuche einige Möglichkeiten bietet, hier im Besonderen, wenn es um Netzwerkzugriffe geht. Dafür muss man sich dann das Tab „Netzwerk“ näher ansehen.

Positionen für einen bestimmten Standort ermitteln

Möchtest du die Werte für Latitude und Longitude für einen bestimmten Ort ihrer Google Map ermitteln, gehe wie folgt vor:

  • Starte Google Maps und gib den gewünschten Ort an. Eine Karte mit deinem Ort wird geöffnet, die in einer bestimmten Zoomstufe angezeigt wird. Für die genaue Ermittlung des Standorts musst du möglicherweise den Zoomfaktor verändern.
  • Bist du in der Lage, deinen gewünschten Standort genau zu lokalisieren, klick mit rechts (Windows-Rechner) auf den Ort und wähle aus dem Kontextmenü den Eintrag „Was ist hier?“. Im Suchfenster der Google Map-Seite werden die Werte für Latitude und Longitude angezeigt. Diese Werte kannst du dann z. B. in die XML-Datei für deine Marker-Elemente übernehmen.

Anmerkungen zum Quellcode der eigenen Google Map

Ich habe dieses Tutorial aus einem Projekt entwickelt, das ich auf einer Website realisiert habe.
Hier werden in verschiedenen Google Maps Aufnahmeorte von Fotos angezeigt. Da diese Standorte sich dynamisch verändern, wollte ich eine einfache Möglichkeit haben, diese Liste von Orten jederzeit einfach zu ändern. Die Position der einzelnen Standorte kann leicht über eine Standard Google Map ermittelt werden. Die Werte für Latitude und Longitude werden zusammen mit Beschreibung und Titel in die XML-Datei eingetragen.
Und ab einer bestimmten Anzahl von Marker-Objekten dürfte solch eine XML-Datei eine Erleichterung sein. In der hier zum Download angeboten Zip-Datei mit den Beispieldateien müssen dann die URLs bei Bedarf durch eigene Pfade ersetzt werden.

Das waren die aus meiner Sicht interessantesten Aspekte einer Google Map Anwendung. Ich hoffe, mein Beitrag konnte dir einen Mehrwert bieten, und freue mich über Anregungen, Kritik und Lob.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.