2k Aufrufe
Gefragt in Webseiten HTML von
Hallo,

mit folgenden Code binde ich meine Karte von Google Maps in eine Seite meines Blogs ein:

<div style="text-align: center;">
<iframe frameborder="0" height="40%" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.de/maps/ms?t=m&amp;msa=0&amp;msid=217.........." width="90%"></iframe>

<big><span style="color: blue;"><b>Distanz 811 km</b> (504 mi)</span></big></div>


Den Code habe ich von Google, aber habe die Height Einstellung auf den relativen Wert 40% (und Width auf 90%) geändert. Damit hatte ich die besten Ergebnisse wenn ich den Blog auf dem Computer und dem Smartphone öffne.

So richtig schön ist es aber eben nicht. Auf dem PC hat die Karte die richtige Breite, die Höhe ist aber viel zu gering. Auf dem Smartphone hat die Karte auch die richtige Breite, ist aber vieeeeel zu Hoch.

Hab ihr vielleicht eine Idee wie man das ganze besser machen kann? Ich hätte die Karte gerne annähern quadratisch.

Und noch eine andere Sache. In der Karte zeichne ich meine Reiseroute auf. Bei Google Maps wird mir für jede Linie eine Streckenlänge angezeigt. Ich würde in meinem Blog gerne automatisch die Summe aller Strecken anzeigen lassen ( á la "Habe schon ... km zurückgelegt")

Geht das irgendwie?

Danke für eure Hilfe und beste Grüße,

critchm

5 Antworten

0 Punkte
Beantwortet von computerschrat Profi (32.2k Punkte)
Hallo critchm,

mit den prozentualen Angaben für Höhe und Breite wird die Karte genau in dem angegebenen Prozentsatz zum verfügbaren Fenster dargestellt. Damit ist das Seitenverhältnis der Darstellung vom Bildschirmformat abhängig. Am PC hast Du vermutlich einen eher in der BReite ausgerichteten Bildschirm und das Fenster des Browsers ist auch eher in die Breite gezogen, auf dem Smartphone hast Du wahrscheinlich Hochformat und daran passt sich die Grafik an.
Wenn das Bild ein definiertes Seitenverhältnis haben soll und in Höhe oder Breite einen Maximalwert nicht überschreiten soll, sehe ich nur die Möglichkeit, serverseitig das Bildformat abzufragen und dann die Skalierung auf dem Server passend durchzuführen. Javascript könnte eine Clientseitige Lösung darstellen, das ist aber nicht in allen Browsern aktiviert und demnach keine allgemeingültige Lösung.


Gruß
computerschrat
0 Punkte
Beantwortet von flupo Profi (17.7k Punkte)
Die Prozentangaben funktionieren bei iFrames nach meinen Erfahrungen auch nur bei der Breite.

Möglicherweise bringen dich verschiedene CSS-Styles für die unterschiedlichen Geräte weiter.
Hier ist ein kleiner Artikel dazu aus der iX.

Gruß Flupo
0 Punkte
Beantwortet von computerschrat Profi (32.2k Punkte)
Das Problem mit prozentualen Breitenangaben für den iframe kann man einfach dadurch umgehen, dass man aussen herum ein <div> setzt.
also

<div style = "height: ... ; width: ...;">
<iframe .......></iframe>
</div>

Dann kann man ohne Einschränkungen mit height und width bzw. max-height und max-width spielen. Leider aber eben nicht so, dass das Bild quadratisch ist und sich in Höhe oder Breite an den verfügbaren Platz anpasst.

Gruß
computerschrat
0 Punkte
Beantwortet von
Hallo zusammen,

danke für eure Rückmeldungen, ich werde nachher am PC mal etwas herum probieren.
Gebe dann hier Bescheid wie es aussieht. Das mit dem <DIV> klingt viel versprechend.

Das Width scheint auch schon zu funktionieren, hatte ich ja auch schon geschrieben und aus euren Kommentaren macht das wohl auch Sinn.
Jetzt muss ich nur noch hinbekommen, dass in der Desktop Version des Blogs die Karte nicht so flach und auf der mobilen Version nicht so hoch ist.

Wie gesagt, ich melde mich später nochmal.
Danke schonmal.

Beste Grüße,
critchm
0 Punkte
Beantwortet von
Hallo nochmal,

ich habe jetzt ein bisschen herumgespielt.
Ich habe es jetzt wieder auf absolute Höhen und Breitenangaben geändert und so lange verändert, bis es auf dem PC und dem iPhone gut aussah.

Bin jetzt (fürs Erste) zufrieden.
Danke für eure Hilfe.

Beste Grüße,
critchm
...