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: 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 Tutorial – Steuerelemente Bisher haben wir uns nicht um die Steuerelemente gekümmert, sondern einfach den Default übernommen. Für den Anfang hat das gereicht, aber insbesondere...
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...
Google Maps Api – Infofenster mit Tabs Eines der größten Probleme bei Google Maps ist es stets, eventuell vorhandene Informationen in den Infofenstern zu verpacken. Hierbei gibt es zwei gru...

Schreibe einen Kommentar

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