Google Map auf 100%
10. August 2009
Eigentlich ist das formatieren der Landkarte (inzwischen nicht mehr) schwer, da sie sich einigermaßen an die Vorgaben hält. Natürlich müssen einige Änderungen am Demo-Mashup getätigt werden, die sich allerdings in Grenzen halten. Den Div-Container aus dem Tutorial müssen wir geringfügig umbauen! Die Formatierung übernehmen wir in eine externe CSS-Datei:
1 | <div id="map_canvas"></div> |
Das notwendige CSS sieht dann wie folgt aus:
1 2 3 4 5 6 7 8 9 10 11 12 | body{ margin: 0; padding: 0; height: 100%; width: 100%; } #map_canvas { position: absolute; height: 100%; width: 100%; } |
Wichtig ist vor allem das position:absolute, sonst klappt es nicht! Die Größe der Karte bleibt auch bei einem Resize des Browsers erhalten. Früher war dies wesentlich komplizierter, aber Google lernt ja auch dazu :) Durch die Vergrößerung der Karte sind die Steuerelemente jetzt natürlich an höchst ungünstigen Positionen. Insofern werde ich mich jetzt erstmal um eine neue Position und um einen Austausch der Grafiken kümmern.

11. August 2009 um 09:30 Uhr
Die Beiträge zu Google Maps sind super, aber dein Demo Mashup wird nach der Layout Umstellung im aktuellen Opera (9.64) nicht mehr angezeigt.
11. August 2009 um 10:03 Uhr
@juhu Danke für den Hinweis, geht jetzt auch in Opera! Problem war Cufon (http://wiki.github.com/sorccu/cufon/), das mag Opera wohl nicht! :)