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

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 Mashup Demo-Instanz auf Archeol.de Wie bereits angekündigt habe ich den Versuch ein Google Maps Mashup zu basteln nun auf http://map.archeol.de online gesetzt. Ich habe eine eigene Kate...
Interaktive Landkarte mit HTML5 Woran es derzeit bei HTML5 mangelt sind coole Seiten, die wirklich bis ins letzte alle Möglichkeiten ausreizen. Wenn es eine solche Seite gibt, ist di...
Geocodieren von Postleitzahlen mit der OpenGeoDB Im vorherigen Teil des Tutorials haben wir die OpenGeoDB installiert, und nun ist es an der Zeit das System sinnvoll einzusetzen. Ich verwende explizi...

2 Antworten auf „Google Map auf 100%“

Schreibe einen Kommentar

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