Google Maps mit individuellem MapType

Wie versprochen fange ich jetzt an, die Steuerelemente von Google Maps zu individualisieren. Den Anfang macht hier der MapType, weil am einfachsten :) Wer die bisherigen Beiträge in dieser Kategorie verfolgt hat weiß, das wir die GMapTypeControl mittels eines

map.addControl( new GMapTypeControl() );

eingefügt haben. Viel schicker fände ich es aber, wenn wir diese Control in einem Pulldown-Menü hätten, in das wir später auch Anzeigefilter und ähnliche Spielereien einbauen können. Entsprechend habe ich in das Demo Mashup erst einmal ein schickes Menü eingebaut.

Der Einbau von individuellen Steuerelementen für das Einstellen des MapType ist ziemlich einfach, da sich die Karte über JavaScript steuern lässt:

<a href="javascript:map.setMapType( G_NORMAL_MAP );">Karte</a>
<a href="javascript:map.setMapType( G_SATELLITE_MAP );">Satellit</a>
<a href="javascript:map.setMapType( G_PHYSICAL_MAP );">Gelände</a>

Entsprechend machen wir hier nichts anderes als zuvor, haben die Steuerelemente aber in unserem Menü und die hässlichen grauen Buttons nicht mehr auf die Karte. Übrig bleiben noch die Elemente für den Zoom, und die Navigation. Dies gehen wir die Tage an.

Ähnliche Beiträge

Google Maps API Tutorial – Übersichtskarte Nachdem ich gestern wieder einmal das Design an der Demo-Anwendung geändert habe. Habe ich bei dieser Gelegenheit eine Übersichtskarte eingebaut. Dies...
Google Maps API – Individueller Zoom Nett ausgedrückt würde ich den "richtigen Weg" für die Erstellung eines individuellen Zoom's für die Google Maps API als anstrengend bezeichnen. Aber ...
Google Maps API: Bedienelemente auf der Karte plat... In unserem Mashup ist zurzeit die Control immens im Weg, da ich eigentlich oben links einen individuellen Slider für einen individuellen Zoom einbauen...
Google Maps zieht die Bremse Nunja, schaut man sich mal um wer wo weshalb Google Maps einsetzt, kommt man schnell zu dem Ergebnis, dass es so ziemlich jeder tut. Die Einbindung is...

Schreibe einen Kommentar

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