OS Map im größenveränderbarem Block?

Communities Deutschland (Germany)
1

Bin ein ganz neuer User und entsprechend mit vielen Fragen. Ich will aber nicht übertreiben, daher vorerst nur die Erste.

Ich versuche OS Map in meine Homepage einzubinden. Mit dem Tutorial auf der wiki-Seite kein Problem.

Nur mein Wunsch wäre, die Karte in einen Block mit veränderbarer Größe einzubauen.
Die Website besteht aus drei Spalten mit %-ualer Breitenangabe. Im content (mittlere Spalte) solte die Karte in
inbox plaziert sein, wobei der Block dann entsprechend der Bildschirmauflösung seine Größe ändert.

#map mit %-Angaben bringt überhaupt keine Anzeige, mit absoluten pix-Angaben ist Anzeige OK aber eben fix, was nicht erwünscht ist.

Was mache ich falsch?

HTML:

<div=“content”>
<div=“inbox” align=“center”>

Karte (Testversion)

CSS:

#content
{
display: block;
float: left;
width:50%;
padding: 5px;
background-color: transparent;

#inbox
{
display: block;
background-color: transparent;
min-height: 300px;
margin-top: 50px;

#header {
font-family: Verdana, Arial;
font-size: 1em;
overflow: hidden;
color: #ffffff;
}

p {
margin-bottom: 20px;
}

#map {
height: 81%; das hier bewirkt, daß sich die Karte über die
width: 96%; ganze body-Breite ausdehnt - komischerweise auch mit
padding: 0; margin: 0; ganz kleinen %-Zahlen
}

#content {
font-size: 1em;
}

#osm {
font-size: 0.7em;
font-style: italic;
margin-bottom: 20px;
}

2

Dann erst einmal herzlich willkommen bei OSM und im Forum.

Soweit, sogut.

Das ist nur geraten, kein Wissen!

  • Du zeichnest mit onload="drawmap(); die Karte beim Öffnen der Seite.
  • Ich sehe nichts, wo die Karte beim/nach dem Resize neu gezeichnet würde.

Keine Ahnung, ob das im body-Tagg geschehen kann/soll/muss aber irgendwo brauchst du meiner Meinung nach etwas wo du sinngemäß sagst:
Wenn die Fenstergröße geändert wird, zeichne die Karte neu.

Vielleicht hilft es
Edbert (EvanE)

3

Vielen Dank für die Antwort.
Zwischenzeitlich habe ich aber meinen Fehler erkannt:
Beim Block #map darf ich die die Höhe nicht variabel angeben, sondern fix.
Dann verändert sich der Map-Block wie gewünsct, aber leider nur in der Breite.

Ich werde jetzt einen anderen Weg gehen:
Im JS werde ich die Auflösung des Users ermitteln und nach einer entsprechenden Umrechnung der Höhe und Breite, beide als Variablen für die Map-Block-Abmessungen verwenden.
Somit erreiche ich die optimale Größe für jede Monitorauflösung.