Google Map auf 100%

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:

<div id="map_canvas"></div>

Das notwendige CSS sieht dann wie folgt aus:

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.

Ähnliche Beiträge

Design-Update zum Zweiten Frei nach dem Motto: Nicht schön, aber einzigartig, habe ich heute noch was am Design geschraubt. Mir ging es vor allem darum, das die Navigationselem...
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...
Nokia Maps API mit jQuery Eine Landkarte online zu bringen bedeutet nicht zwingend Google Maps, sondern es gibt auch noch andere Systeme. Nokia Maps ist eines dieser Systeme un...
Google Maps API – Individueller Zoom Teil 2 Im ersten Teil dieses Mini-Tutorials habe ich ja schon die Mängel meines Skripts aufgezeigt, die wir heute beheben wollen. Die Vorgabe ist dabei recht...

2 Kommentare

Schreibe einen Kommentar