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

Zombie Outbreak Simulator Ich hab alles schon gesehen in Sachen Google Maps Mashups - dachte ich! ;) Ich hab mich grad mal ein wenig umgeschaut was denn so die Spielewelt zum T...
Design-Update zum Ersten Ok, Update ist zugegebenermaßen etwas übertrieben, da das Mashup noch gar kein Design hatte, aber dennoch war es an der Zeit zumindest ein paar kleine...
Mittels GeoIP die Herkunftsstadt einer IP-Nummer e... Google Maps-Anwendungen kursieren inzwischen recht viele dort draußen, aber leider kommen die wenigstens auf die Idee, dass man eigentlich dem Nutzer ...
Über 200 freie Icons für Landkarten Ich habe ja schon ausführlich drüber berichtet wie man zum Beispiel in Google Maps individuelle Icons verwendet. Eine Mashup lässt sich durch Einsatz ...

2 Kommentare

Schreibe einen Kommentar