Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Thomas Weise 16. September 2008

Google Maps API benutzen

Kein Beitragsbild

Eine Karte von Google Maps generieren lassen und auf der eigenen Website einzubinden, ist kinderleicht. Eine Google Map jedoch nach eigenen Ansprüchen mit Hilfe der Google-Maps-API zu erstellen, ist weitaus eleganter und ermöglicht die Verwendung zusätzlicher Features.

Anzeige

Was Sie benötigen

  • Einen Account bei Google
  • Einen Google Maps API-Key. Kopieren Sie sich den erhaltenen Key irgendwo hin, Sie benötigen ihn dann später. Dieser 86-stellige Key ist nur für die eine angegebene Website(Domain) gültig.
  • Um eine Google Map von einem bestimmten Gebiet (beispielsweise Ihres Wohnortes) zu erstellen, müssen Sie noch dessen geografischen Koordinaten bestimmen. Eine Möglichkeit, dies zu tun, finden Sie beispielsweise hier. (Suchen Sie auf der sich öffnenden Website Ihr gewünschtes Gebiet aus und klicken auf einen Punkt, der in Ihrer neuen Google Map der Mittelpunkt sein soll. Unterhalb werden dann dort die Werte für Latitude und Longitude angezeigt.) Speichern Sie sich auch diese zwei Werte irgendwo hin. Dieser Punkt wird dann der Mittelpunkt Ihrer neuenGoogle Map.


Einfache Google Map mit Zoom und Typauswahl

Haben Sie, wie oben beschrieben, Ihren API-Key und Ihre Koordinaten? Dann kann es losgehen.

Screenshot
Einfache Google Map mit Zoom und Typauswahl

Die HTML-Datei
Google Maps werden auf Webseiten mit Javascript eingebunden. Fügen Sie deshalb in Ihrer html-Datei folgenden Code in den head-Bereich ein und tragen anstelle von ‚IHR-API-KEY-VON-GOOGLE‘ Ihren 86-stelligen API-Key ein. Damit prüft Google bei jedem Aufruf dieser Seite, ob der API-Key gültig ist.

   <script
src="http://maps.google.com/maps?file=api&v=2&key=IHR-API-KEY-VON-GOOGLE&h1=de"
type="text/javascript"></script> 

Das Aussehen und die Funktion Ihrer Google Map kann nun auf verschiedene Weise angepasst werden. Wir empfehlen, dies in separaten Dateien zu tun. Eine CSS-Datei für die Darstellung/Aussehen und eine Javascript-Datei für die Funktion der Google Map. In unserem Beispiel haben wir diese Dateien ‚twGmap.css‘ und ‚twGmap.js‘ genannt. Zum Einbinden dieser Dateien fügen Sie bitte folgende zwei Zeilen in den head-Bereich

        <link rel="stylesheet" type="text/css" href="twGmap.css" />
 <script type="text/javascript"
src="twGmap.js"></script> 

und diese eine Zeile in body ein:

       <body onload="twGmapLoad();" onunload="GUnload();"> 

Zu guter Letzt muss nun noch ein Bereich angelegt werden, in dem die Google Map angezeigt wird. Vorzugsweise benutzen wir dafür einen div-Bereich. Dieser bekommt eine id verpasst, damit wir ihn im Javascript ansprechen können (in unserem Beispiel ist die id ‚twGmap‘).

        <div id="twGmap"> </div> 

Die ganze html-Datei nochmal zusammengefasst:

       <head>
 <title>Google Maps - Demo 02 - Marker und
Infofenster</title>
 <meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
 <link rel="stylesheet" type="text/css" href="twGmap.css" />
 <script type="text/javascript"
src="twGmap.js"></script>
 <script
src="http://maps.google.com/maps?file=api&v=2&key=IHR-API-KEY-VON-GOOGLE&h1=de"
type="text/javascript"></script>
</head>

<body onload="twGmapLoad();" onunload="GUnload();">
 <h2>Google Map mit Marker und Infofenster (beim Klick auf
den Marker)</h2>
 <div id="twGmap"> </div>
</body>
</html>

Die Javascript-Datei
Die Javascript-Datei ist weitgehend kommentiert und sollte einigermaßen selbsterklärend sein. Gleich zu Beginn werden Variablen definiert für die id, die Position und die Zoomstufe.

Die darin befindliche Funktion twGmapLoad() wird beim Seitenstart automatisch aufgerufen. Sie führt ein paar Prüfabfragen durch und ruft schließlich die Funktion machTwGmap() auf, in welcher die Google Map dann erstellt wird. Dies mag im Moment etwas umständlich erscheinen, erleichtert uns jedoch spätere Anpassungen und das Einbinden zusätzlicher Features. Außerdem ist es anzuraten, bei der Vergabe der Namen für die Funktionen und für die ‚id‘ nicht solche Bezeichnungen wie ‚load()‘ oder ‚map‘ oder ‚gmap‘ zu benutzen, weil es dadurch schnell zu Verwechslungen kommen kann, sobald man mit mehreren Maps hantiert.

Öffnen Sie nun die Javascript-Datei und Sie sehen oben die (derzeit) 4 Variablen. Für den ersten Test sind diese schon mit Werten gefüllt. Für Ihre eigene Google Map können Sie hier die ‚id‘ des (html-)Elements, die Geo-Koordinaten und die Zoomstufe anpassen.

      var elementId = "twGmap";
var lat = "51.041";
var lon = "13.748";
var zoom = 14; 

Wichtig sind dann eigentlich nur folgende Zeilen:

      var map = new GMap2(document.getElementById(id)); 
      map.addControl(new GSmallMapControl()); 
      map.addControl(new GMapTypeControl()); 
      map.setCenter(new GLatLng(lat, lon), zoom, G_HYBRID_MAP); 

Die erste Zeile erstellt die Google Map mit der angegebenen id. Zeile 2 erstellt das Zoom-Control (links oben auf der Google Map. Zeile 3 erstellt das Control zur Auswahl des Anzeigetyps (Karte, Satellit oder Hybrid). Zeile 4 setzt die Position (Mittelpunkt) der angegebenen Geo-Koordinaten. Für ‚G_HYBRID_MAP‘ kann dort auch ‚G_SATELLITE_MAP‘ oder ‚G_NORMAL_MAP‘ eingesetzt werden.

Die CSS-Datei
In der CSS-Datei wird die Darstellung, beziehungsweise das Aussehen der Google Map festgelegt. In diesem ersten bescheidenen Beispiel handelt es sich dabei vorerst nur um die Breite und Höhe der gesamten Google Map.

       #twGmap {
width: 600px;
height: 450px;
} 

Demo und Download (für ‚Einfache Google Map mit Zoom und Typauswahl‘)

  • Demo ansehen
  • Quelltexte ansehen: twGmap.js twGmap.css
  • gesamtes Beispiel herunterladen


Marker und Infofenster

Screenshot

Google Map mit Marker und Infofenster

Das Hinzufügen von Markern und Info-Fenstern geschieht nun ausschließlich in der Javascript-Datei. Das Aussehen des Infofensters wird in der CSS-Datei geregelt. Der Übersichtlichkeit halber lagern wir das Erstellen der Marker und der dazugehörigen Infofenster in der Javascript-Datei wieder in eine eigene Funktion aus (im Beispiel setTwMarkers(). Diese wird folgendermaßen aufgerufen:

       map = setTwMarkers(map); 

und enthält unter anderem folgende Zeilen:

       var point = new GPoint(13.748, 51.041); 
       var marker = new GMarker(point); 
       var html = "HIER DEN HTML-CODE DES INFO-FENSTERS REIN"; 
       GEvent.addListener(marker, "click", function()
{marker.openInfoWindowHtml(html)}); 
       map.addOverlay(marker); 

In Zeile 1 wird der Geo-Punkt erzeugt mit Angabe der Breiten- und Längengrade (Achtung: Zuerst den Längengrad angeben, dann den Breitengrad). Mit diesem Punkt erzeugen wir in Zeile 2 den Marker. In der Zeile 3 wird das Infofenster erzeugt. Diese Zeile ist dann bei einem anspruchsvollerem Infofenster natürlich etwas länger. Zeile 4 sorgt dafür, dass sich das Infofenster bei einem Klick auf den Marker öffnet. Hier werden unsere soeben erzeugten Marker und Infofenster verwendet. In Zeile 5 wird alles auf unsere Google Map ‚projiziert‘.

Demo und Download (für ‚Marker und Infofenster‘)

  • Demo ansehen
  • Quelltexte ansehen: twGmap.js twGmap.css
  • gesamtes Beispiel herunterladen


mit Übersichts-Ausschnitt

Screenshot

Google Map mit Übersichtsausschnitt

Sie können auch eine kleine Übersichtskarte anzeigen lassen, in der man den sichtbaren Bereich der Google Map mit einem kleinen Sichtfenster mit der Maus verschieben kann. Dafür bedarf es nur der Änderung einer Zeile im Javascript. Suchen Sie in der Javascript-Datei folgende Zeile

       map.addControl(new GMapTypeControl()); 

und ändern Sie diese Zeile folgendermaßen ab

       map.addControl(new GOverviewMapControl()); 

Demo und Download (für ‚mit Übersichts-Ausschnitt‘)

  • Demo ansehen
  • Quelltexte ansehen: twGmap.js twGmap.css
  • gesamtes Beispiel herunterladen


Verschiedene Controls

Screenshot

verschiedene Zoom-Controls

Um eines der drei links zu sehenden Zoom-Controls auf Ihrer Google Map anzeigen zu lassen, suchen Sie in der Javascript-Datei folgende Zeile

 map.addControl(new GSmallMapControl()); 

und ändern Sie diese Zeile folgendermaßen ab

 map.addControl(new GLargeMapControl()); 

oder

 map.addControl(new GSmallZoomControl()); 
Screenshot

das Entfernungs-Control

Zusätzlich ist es auch möglich eine Scale-Control für die Anzeige einer Entfernungs-Skala einzubinden. Diese wird dann unten links angezeigt und ist standardmäßig im Satelliten- bzw. im Hybrid-Modus recht unauffällig. Um diese Entfernungs-Control in Ihrer Google Map anzeigen zu lassen, suchen Sie in der Javascript-Datei folgende Zeile

               map.addControl(new GSmallMapControl()); 

und fügen davor folgende zwei Zeilen ein (die erste Zeile bewirkt die Anzeige in Kilometer/Meter)

               _mPreferMetric = true;
map.addControl(new GScaleControl()); 

Demo und Download (für ‚Verschiedene Controls‘)



Erstveröffentlichung 16.09.2008

Thomas Weise

Thomas Weise ist gelernter Anwendungsentwickler. Ihn zog es aber immer schon in Richtung Internet und Webentwicklung. Seine Artikel auf drweb sind Gastartikel, selbst bloggt er auf

50 Kommentare

  1. wie sieht es aus, wenn ich eine Karte in eine fremde Webseite einbauen will?
    Der Api Key ist ja nur für meine eigenen Domains gültig.
    Hat jemand eine Antwort? Das Netz leider nicht.
    lg
    Katja

  2. Habe das selbe Problem mit der Fußnote.
    Sie ragt nach links in den Mittelteil meiner Seite heraus (die Google Map ist bei mir in einer Spalte am rechten Seitenrand).
    Wie kann man sie formatieren?

    LG, Anja

  3. Hallo,

    habe das Beispiel umgesetzt, was auch soweit klappt,
    jedoch ragt die Fussnote von Google weit über den linken Bildrand hinaus (Siehe Link). Kann man das irgendwie unterdrücken?

    Gruss city

  4. Hallo

    stimmt es, dass nur ein gewisses Kontigent auf der eigenen Seite aufgerufen wird und Google dann den Zugriff auf das Kartenmaterial sperrt ?
    Ich habe gehört, dass nach einer bestimmten Anzahl von Besuchern meiner Seite Google Maps nicht mehr angezeigt wird.
    Stimmt das ?

  5. @Flogag:
    Kannst du bitte schreiben, was nicht funktioniert? So könnte man doch den Fehler besser abstellen.
    Ich hab schon viele Zuschriften bekommen, bei denen alles funktioniert, daher wäre es doch gut, wenn du die gefundenen Fehler hier postest. So wäre auch allen geholfen, bei denen diese Fehler eventuell auch auftreten.

  6. Wenn man das Tutorial zum einsteigen benutzt ist es echt Mühsam alle Fehler zu besetigen. Wie es z.B. im ersten Step beschrieben ist funktioniert es nicht. Ich habs jetzt nach langem suchen gefunden. ^^ echt schön, wenn Leute Tutorials schreiben aber bitte dann nicht halbherzig.

  7. @Philipp:
    Das wird im Teil
    Google Maps mit Sidebar
    erklärt.

  8. Hallo!
    Vielen Dank für die super Anleitung – funktioniert alles bestens!
    Ich wollte jetzt noch einen 2. und 3. Marker hinzufügen, kann mir da jemand einen Tip geben wie man das am besten tut?
    Kann auch sein, dass ich das oben überlesen habe?!

    Gruss

  9. Besten Dank für die Anleitung! Genau danach habe ich gesucht.

  10. @Max: die gewünschten Erklärungen:
    1. Welches von den 4 Beispielen funktioniert nicht? (sorry, ich hab gerade alle durchprobiert, klappt eigentlich???)
    2. Die Funktion setTwMarkers ist eigentlich auch in den herunterladbaren Dateien drin, hab gerade nachgesehen. Hast du eventuell nicht in der richtigen von den 4 Beispielen danach gesucht?
    3. Der Marker wird in der Funktion setTwMarkers() erstellt.

    Ich hoffe, ich konnte dir weiterhelfen.

  11. Hallo,
    schönes tut aber nichtmal das Beispielt funktionert.
    Ich kann in den heruntergeladenen Dateien keine Marker finden und auch die funtion setTwMarkers ist nirgends deklariert so das man sie nutzen könnte. ICh würde mich über erklärungen sehr freuen.

    Danke

  12. Eventuell zum „Selberbauen“ könnte folgender Link helfen.
    So kann man sich auch nur verschiedene Kategorien einzeln oder gemischt auf der Map und in der Sidebar anzeigen lassen. Das dort vorgestellte Beispiel ist natürlich noch sehr „ausbaubar“, aber die Grundtechnik stimmt.

    Link

  13. Falls jemand ein Cluster System zum Zusammenfassen von Markern sucht, kann ich den „marker-clusterer“ vom gmaps utility libary empfehlen.

    http://gmaps-utility-library-dev.googlecode.com/svn/trunk/markerclusterer/

    Es ist einfach zu implementieren und sehr performant.
    Im Einsatz z.B. hier: http://www.norwegen-reise.com/camping.karte.html

    Kann jemand ein anderes Cluster System empfehlen?

    Grüße, Black

  14. hallo Christian,

    ich denke hier liegt ein missverständnis vor. wir setzen google maps nicht ein, wir berichten darüber. wir nutzen auch kein kartenmaterial, wir zitieren.

  15. Ich bin hier gerade auf den Beitrag gestoßen, habe ihn nur überflogen und will auch nicht auf Qualität eingehen. Ich will hier nur den Betreiber der Webseite warnen, dass mit dieser Seite durch die Screenshots von Google Maps die Terms of Use verletzt werden.
    Ich würde dringend empfehlen die rauszunehmen.
    Dieser Beitrag: http://www.pcwelt.de/start/dsl_voip/online/praxis/169821/so_nutzen_sie_google_maps_korrekt/ unterstützt mich.

    Grüße Christian

  16. Hi Thomas,
    Lob und 1000 Dank!
    Du hast mir als blutigem Anfänger mit Deinem Tutorial sehr geholfen.

    Salve
    Frank

  17. @Dieter: Am Besten guckst du dir mal den Artikel an, da ist auch beschrieben, wie man mehrere Marker machen kann. (http://www.drweb.de/magazin/google-maps-mit-eigenem-infofenster/)

  18. Funktioniert gut auch mit 2 Markern. Allerdings habe ich das Problem wenn ich das Infofenster schließe wird der Marker nicht mehr angezeigt. Ich denke sie müssen nach dem schließen neu geladen werden. Wie kann ich das machen?

    Gruß

    Dieter

  19. Hab alles nach der Anleitung installiert, läuft prima erstmal. Finde die Anleitung besonders für Einsteiger gut. Werde sicherlich die Karte ergänzen. lg

  20. Moin Thomas,

    sorry für meine späte Antwort, hatte nicht so schnell mit Deiner gerechnet :-)

    Ist ja interessant, ich hab es auch auf mehreren Maschinen probiert und immer den selben Fehler….

    Vielleicht steig ich doch wieder auf Screenshots in diesem Fall um… :-(

  21. @Rick: Guckst du hier: http://www.drweb.de/magazin/google-maps-mit-eigenem-infofenster/
    Ansonsten kannste das Infofenster über das Javascript so aufbauen wie normales HTML und das Design mit CSS anpassen.

    Eine gute Anleitung für Infofenster, die über Tabs verschiedene Inhalte anzeigen, gibts auch hier: http://econym.org.uk/gmap/basic10.htm

  22. Und wie kann ich andere Infofenster machen? Das im Beispiel bietet ja nicht sehr viel.

  23. Upps, hatte noch Simon und Klaus vergessen.
    @Klaus: Wie du eigene Marker machst wird z.B: auf http://econym.org.uk/gmap/custom.htm beschrieben.
    Und die Größe des Infofensters legst du in der CSS-Datei fest (mit width und height zu .twGmap).
    @Simon: Wahrscheinlich hast du es hinbekommen, die Google Map in deinem Link funktioniert bei mir zumindest ;-).

  24. @Shrike: Ich hab mal deine Seite mit der Google Map in meinem IE geöffnet, er zeigts alles an. Hab auch mal mit dem IE-Tester mit dem IE6 probiert, er zeigts auch an (zwar nach einer Skriptfehler-Warnung).
    Hmm, weiß nich so recht… klappts bei dir immer noch nich?

  25. Vielen Dank für den Artikel, sehr übersichtlich und einfach erklärt…

  26. Moin Thomas,

    zunächst mal Danke für das schöne Tutorial, ich hab mir das schon mal angeschaut, aber da meine Probleme die selben geblieben sind, verfolge ich meinen Ansatz weiter.

    Nun zu meinem Prob: Auf meiner genannten Webseite habe ich auch eine Karte eingebunden. Auf einem „ordentlichen“ Browser wird das Ganze auch richtig angezeigt aber sobald ich sie mit dem IE7 anzeigen lasse, dann wird nur die linke obere Kachel angezeigt. Selbst wenn man die Karte verschiebt, verschwindet der Inhalt. Da das Prob bestehen bleibt, wenn ich Dein Skript nutze, mach entweder ich noch etwas falsch oder ist etwas der IE Mist?
    Die Webseite noch mal: http://www.hoffmann-sh.de

  27. Ich habe mir ebenfalls eine MAp auf meiner HP erstellt, allerdings nicht genauso wie du es beschreibst. Leider will das laden mit den Infpfenstern nicht funktonieren. Die Bilde welche ich da einfüge lädt es mir ausserhalb des Infofensters. Erst beim zweiten anklicken, wenn das Bild schon mal geladen wurde, ist es auch im fenster drin. (siehe HP http://www.loeffels.ch/map/reisekarte/)
    Hat da wer ne Lösung?

  28. Hallo,
    bin gerade dabei anhand dieser tollen Anleitung eine Karte via GoogleMaps API zu generieren.
    Klappt auch soweit alles mit dem key und der Darstellung.

    Was ich leider nicht hinkriege sind zum einen eigene (oder andere als die Standard-) Marker und das per CSS gestaltete Infofenster ist größer, als jenes von GoogleMaps, also das Fenster überlagert den Standardbuble von google.

    Weiß jemand Rat?

    Viele Grüße,
    Klaus

  29. Habe den Fehler gefunden:

    im JS-File gibt es eine Zeile mit einem onclick befehl und verweis auf einen flicker-link (wenn ich sie hier reinkopiere, wird das posting nicht veröffentlicht).

    Diese Zeile fehlte — die hat zwar keinerlei Auswirkung auf die Funktion bei mir, wenn ich sie aber weglösche, dann zeigt der IE7 das Bild im Infofenster nicht mehr – der FF aber sehr wohl…

    Besten Dank für die Hilfe!
    Franz

  30. @papperlapapp: Naja, ich denk mal, das ist normal so. Zumindest find ichs so auch besser, dass der Rest da abgeschnitten wird und nicht die ganze Litanei die Karte verschandelt.

  31. mal ne andere Frage, mir reißt in der Satellit- und Hybridansicht immer der untere weiße Copyright-Text aus. Das heißt er bleibt nicht im eigenen Map-Fenster sondern streckt sich nach links aus ihm heraus, über Tabellen, Hintergründe und Texte. In der Normal-Ansicht ist alles oki. Wie kann man das beheben?

    kann man auch hier gut erkennen: http://www.schockwellenreiter.de/maps/tut02.html

  32. Vielleicht hilft das ja weiter:
    Ich hab dasselbe Tutorial mit Demos auch nochmal auf meiner Website, kannste ja mal gucken, ob die Demos dort in deinem IE funzen.
    Guckstdu auf (http…)progtw.de/website/twGmap .
    Wenn das dort klappt, kannste ja dort nochmal inn Quelltext gucken, aber der müsste eigentlich derselbe sein.
    Gib mal bescheid dann ;-)

  33. alles schon probiert – er zeigts einfach nicht :((

    aber nachdem weder das bild an sich ein problem darstellt (direkt kann ichs ja mit dem IE öffnen), muss es wohl irgendwie an der verknüpfung oder dem aufruf über js liegen (js ist aber aktiviert und den pfad des bildes habe ich auch mehrfach gewechselt).

    es ist mir schlicht ein rätsel…

  34. Hm, da weiß ich auch nicht.
    Den Cache des IE mal geleert?
    Oder sind irgendwelche Filter im IE eingestellt?
    Evtl. mal ein anderes Bild probiert mit richtiger Angabe von width und height?
    Aber ansonsten kann ich mir das auch nich erklären leider.

  35. Hallo Thomas!

    Habe schon alle möglichen Umbennungen und Positionierungen in Ordnern versucht.
    FF zeugts immer
    in IE7 kommt nur der Zierrahmen (reduziert auf ein kleines Quadrat, weil ja das beinhaltete Bild nciht angezeigt wird). Es gibt in IE auch kein rotes Kreuz wie zB bei CMYK-JPGs, die er nicht anzeigt.

    Hier der betroffene Code aus der JS Datei deiner function setTwMarkers(map):

    1) html += „<p class=’img‘ „;
    2) html += “ <a href=’bimDynamo.jpg‘ target=’_blank‘ „;
    3) html += “ title=’New Office Building 2008, click to enlarge‘ „;
    4) html += “ <img src=’bimDynamo.jpg‘ „;
    5) html += “ width=’190′ height=’142′ alt=’Office Building‘ /“;

    Die umgedrehten „<“ zeigt es mir hier nicht (am Ende vor “ in 1) und 5))

    Besten Dank!
    Franz

  36. @Franz: guck mal in der Javascriptdatei so bei Zeile 69 etwa, da wird das Bild eingebunden. Mach mal aus der Zeile
    html += “ <img src=‘../img/bimDynamo.jpg‘ „;
    das hier:
    html += “ <img src=’bimDynamo.jpg‘ „;
    und ich hab auch grad gemerkt, das Bild ‚bimDynamo.jpg‘ is ja garnich in der zip-Datei mit drin :( (Fehler von mir)…
    Mach da mal bitte irgendein Bild, nenn es ‚bimDynamo.jpg‘ und schmeiß das mit in das Verzeichnis.

  37. Vielen Dank f das tolle Tutorial – für eine eigene Anfahrtsbeschreibung auf der Homepage wirklich perfekt!

    Ich habe mich genau an die obige Anleitung gehalten – in FF 3.1 funktionierts bestens.

    In IE7 kommt allerdings das JPG im pop-up infowindow nicht, wenn ich auf meinen gesetzten marker klicke?

    Any ideas????

  38. Ich finde diese Anleitung spitze, denn sie zeigt mit Ruhe und langsamen Schritten die Einstellungen.
    Kompliment also für diese Hilfestellung, denn nicht alle User sind Weltmeister!

  39. @Jürgen:
    Hab schon länger nicht mehr reingeschaut, deswegen die späte Antwort.

    Schau dir dazu mal die Erweiterung EBubble an. Das müsste dir weiterhelfen ;-)

  40. @Benni

    und wie kann ich den Style des kompletten Infowindow verändern??

    wäre um jeden Hinweis dankbar.

  41. Einfach in der Funktion ’setTwMarkers()‘ mehrere Marker erstellen (in der Javascript-Datei). Da müsstest du dort dann für einen zweiten Marker bei ‚marker‘ -> ‚marker02‘, bei ‚point‘ -> ‚point02‘ usw. schreiben.
    Aber das ist bei vielen Markern ein wenig umständlich. Deshalb kann man auch jeden Marker in einer eigenen Funktion erstellen.
    Das wird im nächsten Artikel beschrieben. Er müsste bald bei drweb veröffentlicht werden. Dort geht es dann auch um eine Sidebar, in der dann die Marker nochmals zusammengefasst werden können.

  42. Hi.

    Und wie könnte man in dem Quelltext jetzt mehrere Marker setzen?

  43. Aber das Infowindow im Beispiel hat schon einen eigenen Style (bei so einer Demo halt ganz schlicht).

    Naja. Als eigenen Style würde ich das noch nicht definieren, da ja nur innerhalb des Infowindows was hinzugekommen ist. Ich meinte eigentlich auch Infowindows, die komplett selbst gestaltet sind und nicht auf dem normalen von Google aufbauen.

  44. Da hast du völlig recht, dass dies nur eine langweilige ‚Standardkarte‘ ist!
    Gedacht ist dieser Artikel auch nur als kleine Einführung, ich möcht gern noch genau solche Dinge beschreiben, die du ansprichst (verzögert sich wohl durch den drweb-Relaunch etwas; die Links sind im Moment auch grad nicht aktuell).
    Angedacht sind beispielsweise noch Artikel über Marker-Kategorien(wie auf deiner Seite), Directions, Geocoding, eigene Icons, KML-Daten und auch Platz für Spielereien ist bei Google Maps natürlich immer.
    Aber das Infowindow im Beispiel hat schon einen eigenen Style (bei so einer Demo halt ganz schlicht).

  45. Hm. Alles ganz gut und nett, aber wirklich interessant ist es nicht so eine „Standardkarte“ zu entwerfen. Dazu findet man auch alles bei Google selbst.

    Richtig interessant wird es erst dann wenn man mit Infowindows im eigenen Style und Clustering arbeiten will und das auch noch automatisiert per generiertem Javascript.

    Warum ich das sage? Weil ich schon oft genug mit Google Maps gearbeitet habe und für die Firma, in der ich meine Ausbildung mache, ein System geschrieben habe, dass alle Contents aus unserem CMS automatisiert in einer Karte anzeigt mitsamt verschiedenen Markern, Infowindows und Clustering. Ein Beispiel dazu habe ich natürlich auch noch: http://www.chiemsee.de/ ;-)

Schreibe einen Kommentar

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