Googe Map: Wie Zeilenumbruch in Copyrightnotiz?

[Andreas I.]

Hallo,

ich verwende eine Googlemap, die aus Designgründen nur 250 Pixel breit ist. Die Copyrightnotiz am unteren Rand sprengt nun das Design und wandert über den Rand hinaus.

Weiß jemand, wie ich einen Zeilenumbruch da hinzufügen kann? Dann würde es wieder passen.

Code: Alles auswählen

<div id="map" style="width&#58; 250px; height&#58; 300px; overflow&#58;hidden"></div>

Overflow:hidden löst das Problem ist aber glaube ich gegen die Nutzungsbedingungen - es wird ja einfach Text ausgeblendet, der sichtbar sein muss.

[pr_sniper]

<br> - https://de.selfhtml.org/

[Andreas I.]

Aha - und wie soll ich das <br> da einfügen? Hier nochmal die Situation als Bild:



Unten rechts steht die Copyrightnotiz: (c) 2008 Google - Kartendaten (c) 2008 Tele Atlas - Nutzungsbedingungen

Wenn der Kartenausschnitt jetzt zum Beispiel nur 250 Pixel breit wird, dann müsste an irgendeine Stelle ein Zeilenumbruch hinzugefügt werden. Ansonsten wandert der Text über den Bildrand hinaus. Da, wo jetzt Bindestriche sind, würde es auch inhaltlich gut passen.

[Southmedia]

Wie wird denn diese Copyright-Notiz generiert? Direkt im HTML oder per Javascript?

[Andreas I.]

Die wird per JavaSript generiert. Dieses Script wird von den Googleservern nachgeladen. Da kann man soweit ich weiß, nichts dran drehen - oder?

Was ich suche, ist eine Möglichkeit, dem <div> zu sagen, dass Wordwrap innerhalb des divs automatisch angewandt werden soll. Geht da was?

[Southmedia]

Kommt drauf an wie der generierte Quellcode aussieht.

Wird das div denn überhaupt auf deiner Seite generiert? Wenn es nämlich in einem iFrame gerendert wird hast du keine Chance da was zu manipulieren.

Schon bei Google (per Mail oder in einem Supportforum) nachgefragt was die meinen?

[Andreas I.]

Das div erzeugt man noch selber, dann übergibt man den Div-Namen an das nachgeladene Script von Google. Die zaubern da dann irgendwie die Karte hinein. Mit overflow:hidden wird der über den Rand springende Text einfach versteckt, aber das ist nicht die letzte Lösung.

Im Google Map Forum hatte ich eine Anfrage gestellt. Die raten mir, nach dem erzeugten Textelement zu suchen und das dann im Nachhinein zu formatieren. In der Tat ist bei dem fraglichen Text die Eigenschaft "whitespace" auf "nowrap" gestellt. Daher also die Probleme... "Normal" wäre hier die klügere Wahl seitens Google gewesen.

Mit dem CSS-Viewer und Firefox habe ich bis jetzt aber noch nicht den Namen des Textelements herausgefunden. Vermutlich ist das Element namenslos und somit nicht so einfach adressierbar(?)

[Southmedia]

Selbst dann lässt es sich per Javascript adressieren. Kannst du denn vielleicht eine Testdatei hochladen und hier verlinken? Vielleicht kommen wir dann weiter...

[Andreas I.]

Adblocker einschalten und mal hier gucken:

https://www.stuck-und-dielen.de/Oberbaumbruecke.htm

Unbedingt Adblocker einschalten - ohne Adblocker sieht man den Fehler nicht, da der Text dann im weißen Hintergrund des großen div verschwindet.

Da habe ich lange nichts mehr dran gemacht. In diesem Fall ist es keine Karte, sondern ein Satellitenbild. Soweit ich mich erinnere, hat das 2006 alles ohne Probleme funktioniert. Mit eingeschaltetem Adblocker sah die Seite halt nicht ganz so schön aus, aber das war mir egal. Die Copyrightnotiz war um 2006 aber noch im Rahmen. Scheinbar ist seit 2006 die Copyrightnotiz länger geworden.

Jetzt aktuell bei einer Googlemap Karte ist das Problem dasselbe in Grün.

[Southmedia]

Mach doch bitte ne extra Testseite wo wirklich nur die Map drauf ist, so ist das definitiv zu anstrengend.

[Andreas I.]

https://www.stuck-und-dielen.de/test.htm

Code: Alles auswählen

    <script src="http&#58;//maps.google.com/maps?file=api&v=2&key=ABQIAAAAWsQ0gEprqe8G82446x5hjxR_neII6kh0xehSdp6sR9T7KzlKBRS6NVIDysoT1019UHtva6QpJ6Rtqw" type="text/javascript"></script>

    <script type="text/javascript">
    //<!&#91;CDATA&#91;
    function load&#40;&#41; &#123;
      if &#40;GBrowserIsCompatible&#40;&#41;&#41; &#123;
        var map = new GMap2&#40;document.getElementById&#40;"map"&#41;&#41;;
        map.setCenter&#40;new GLatLng&#40;53.550294, 9.99272&#41;, 17&#41;;
      &#125;
    &#125;
    //&#93;&#93;>
    </script>

Im head werden verschiedene JavaScriptfunktionen von Google heruntergeladen. load() ist direkt codiert und greift auf die heruntergeladenen Funktionen zu.

Code: Alles auswählen

<div style="width&#58;400px;">Platzhalter</div>
<div id="map" style="width&#58; 250px; height&#58; 300px; float&#58;left"></div>

Zwei divs nebeneinander. Man sieht, wie die Copyrightnotiz den Rahmen des zweiten div sprengt. Mit overflow:hidden kann man den Text verstecken, aber das sieht Google evtl. nicht so gerne.
Also lieber whitespace:normal irgendwie erzwingen. Aber wie?

[fw]

Also lieber whitespace:normal irgendwie erzwingen. Aber wie?

Google hat bereits ein "nowrap" im Quelltext:

Code: Alles auswählen

<div dir="ltr" style="color&#58; black; font-family&#58; Arial,sans-serif; font-size&#58; 11px; white-space&#58; nowrap; text-align&#58; right; -moz-user-select&#58; none; position&#58; absolute; right&#58; 3px; bottom&#58; 2px;"><span>Kartendaten ©2008 Tele Atlas - </span><a style="color&#58; rgb&#40;119, 119, 204&#41;;" target="_blank" href="http&#58;//www.google.com/intl/de_ALL/help/terms_maps.html">Nutzungsbedingungen</a></div>

Vergrößere doch mal die Schriftgröße deines Browsers per Menü oder Scrollrad.

[Southmedia]

Also ich habe mit mir der Firefox Web Developer Toolbar mal den generierten Quellcode angeschaut. Das ist der relevante Part für den Hinweis:

Code: Alles auswählen

<div dir="ltr" style="color&#58; black; font-family&#58; Arial,sans-serif; font-size&#58; 11px; white-space&#58; nowrap; text-align&#58; right; -moz-user-select&#58; none; position&#58; absolute; right&#58; 3px; bottom&#58; 2px;">
<span>Kartendaten ©2008 Tele Atlas - </span>
<a style="color&#58; rgb&#40;119, 119, 204&#41;;" target="_blank" href="http&#58;//www.google.com/intl/de_ALL/help/terms_maps.html">Nutzungsbedingungen</a>
</div>

Wenn man hier white-space auf normal setzt wird der Text umgebrochen.

Das oben abgebildete ist das letzte Div des Div mit der id "map", damit solltest du es adressieren können. Helfen sollten folgende Links:
https://de.selfhtml.org/javascript/obje ... ment_by_id (für das div aussen rum)
https://de.selfhtml.org/javascript/objekte/node.htm (um dann irgendwie an das letzte Unter-Div zu kommen)

Viel Erfolg!

[Andreas I.]

@fw: Und kann man da was tun außer dem äußersten div overflow:hidden zu verpassen?

Wenn ich die Schriftgröße per Scrollrad ändere, ändert sich nichts am Problem. Ab einer gewissen Größe werden die zwei divs untereinander dargestellt, statt nebeneinander...

@southmedia: Hmm, klingt aufwändig.

[fw]

Versuch doch mal deinem div mit der id=map eine kleine und feste Schriftgröße "anzuerziehen".