Google Maps mit eigenen Karten

Ich wollte schon länger einmal mit Google Maps herumexperimentieren, insbesondere im Bereich von „custom maps“. Das bedeutet nicht, dass man vorhandene Karten mit neuen Markern oder Layern versieht, sondern dass man eine vollständig neue, fiktive Karte anzeigt, beispielsweise die einer Fantasy-Welt oder eines Raumsektor – beides Varianten, die Spieler von MMOs oder Pen&Paper-Rollenspielen sicherlich erfreuen. Außerdem ist so etwas ein prima Forschungsobjekt, weil es nebenbei auch noch Spaß macht.

Tatsächlich war die Realisierung einfacher als gedacht, es gibt diverse Tutorials im Netz, die allerdings dann ein wenig schwer zu verstehen sind, wenn man – so wie ich – in dieser Form noch nie mit der Google Maps API gearbeitet hat. Letztendlich ist das aber auch nur Javascript. :o)

Etwas knifflig war es, die Zoomlevel der vorhandenen Karte festzulegen, die man an passende Zoomlevel der API anpassen musste, weiterhin musste die vorliegende Karte in Kartensegmente passender Größe für unterschiedliche Zoomstufen unterteilt werden, für letzteres gibt es allerdings ein Photoshop-Skript, das diese Arbeit doch erheblich vereinfacht. Auf die Nutzung eines Mapservers habe ich aufgrund der geringen Komplexität verzichtet und stattdessen einfach in einem Unterverzeichnis auf dem Webserver Bitmap-Kacheln abgelegt, die vom Javascript via API angefordert werden.

Nachdem die grundsätzliche Karte erst einmal stand und ich das Koordinatensystem verstanden hatte, war es nicht mehr weiter schwer, über Klick auf Links entweder an eine bestimmt Position der Karte zu navigieren bzw. Marker erscheinen zu lassen.

Die Demo kann man sich unter sto.rumschlauen.de ansehen (Update November 2012: Demo nicht mehr vorhanden), wer sich dafür interessiert, wie das alles geht, wirft einen Blick in den Quelltext, allerdings kommen die Datensätze der Kartenpositionen und der Marker via PHP aus einer Datenbank.

Es handelt sich – wie gesagt – um ein Experiment, der Code ist also nicht unbedingt optimiert.

Ich habe dieses Projekt übrigens durchgeführt, als ich noch dachte, dass die Betreiberfirma von STAR TREK ONLINE – Cryptic – es schaffen würde, ein brauchbares MMO in Roddenberrys Universum abzuliefern. Leider ist das nicht der Fall und ich kann jedem von diesem Spiel nur dringend abraten, es hat mit STAR TREK außer dem Namen nicht viel zu tun, es mangelt massiv an Content und es besteht zum größten Teil aus sinnlosem Geballer. Als Google-Maps-API-Demo und proof of concept kann die Seite aber dennoch für etwas nützlich sein… :o)

Ihnen hat dieser Artikel gefallen oder geholfen? Prima! Dann denken Sie doch an mich, wenn Sie eine Webseite benötigen!

Dieser Eintrag wurde veröffentlicht in Google Maps, Javascript und getagged , , , . Bookmarken: Permanent-Link. Kommentieren oder ein Trackback hinterlassen: Trackback-URL.

8 Kommentare

  1. Lukas
    Erstellt am 9. September 2012 um 12:11 | Permanent-Link

    Das Ding ist super.
    Kannst du nicht ein Youtube Tutorial dazu machen, wie man eine eigene Google Map für die HP erstellt.
    Ich brauche unbedingt so ein Ding für meine neue Community.

  2. Stefan Holzhauer
    Erstellt am 9. September 2012 um 12:42 | Permanent-Link

    Leider keine Zeit, die erstellung eines Videotutorials ist für mich im Moment deutlich zu aufwendig. Es gibt aber reichlich Tutorials die beschreiben, wie das funktioniert – Grundkenntnisse in Javascript/jQuery und PHP/mySQL vorausgesetzt.

  3. Lukas
    Erstellt am 9. September 2012 um 13:05 | Permanent-Link

    Schade, danke trotzdem.
    Wie groß müsste die Aufwandsentschädigung ausfallen, wenn du das für uns übernehmen würdest.

  4. Stefan Holzhauer
    Erstellt am 9. September 2012 um 13:22 | Permanent-Link

    Das kann ich so pauschal nicht beantworten, da der Aufwand vom Umfang abhängig ist, also beispielsweise wieviele Zoomstufen, wieviele Arten und die Menge von Layern und Markern usw. Mein Stundensatz liegt für solche Arbeiten bei EUR 50,00 zzgl. Ust.

  5. Erstellt am 9. September 2012 um 14:07 | Permanent-Link

    So wie diese von http://map.dayz-mod.de
    Auch der Zoomlevel ist gut (ca.6)

  6. Erstellt am 9. September 2012 um 14:26 | Permanent-Link

    Das was ich von dir brauche ist, eine Blanko Map mit ein oder zwei Markern als Beispiel.
    Den Inhalt fülle ich selbst mit den Markern, dazu müstest du mir einige Sätze Sagen was ich dabei beachten muss.

  7. Erstellt am 12. November 2012 um 14:31 | Permanent-Link

    Hallo,

    ich bin nach etlicher Suche auf deinem Blog gelandet.
    Und genau, dass was du hier beschrieben hast bräuchte ich auch.
    Ich möchte für ein neues MMO eine Interaktive Karte erstellen.
    Leider sind deine Link zu den Tutorials oder zu dem Beispiel nicht mehr verfügbar, gibt es dort noch alternativen? Hast du eventuell noch den Source-Code?
    Außer deinem Beitrag habe ich wirklich nichts schlüssiges im Netz gefunden.

    Ich würde mich sehr über eine Antwort freuen!

  8. Stefan Holzhauer
    Erstellt am 12. November 2012 um 14:52 | Permanent-Link

    Ich glaube nicht, dass Dir der Sourcecode weiterhelfen dürfte, da Google seine API inzwischen aktualisiert hat und die Herangehensweise eine andere ist.

    Du solltest nach aktuellen Tutorials zur Google Maps API suchen. Die grundsätzliche Art und Weise mit einem Mapserver dürfte dieselbe geblieben sein, aber eben nicht die API.

    Weiterhin ist die Nutzung von Google Maps nicht mehr kostenfrei, ab einer bestimmten Menge an Zugriffen soll man dafür zahlen.

Ihr Kommentar

Ihre E-Mail wird niemals veröffentlicht oder verteilt. Benötigte Felder sind mit * markiert

*
*

Du kannst diese HTML Tags und Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Time limit is exhausted. Please reload CAPTCHA.