iFrame und Aktualisierung

[Tommy Herrmann]

Ich habe kein "Lazy Load" aktiviert

[pinky]

Das ist sehr merkwürdig. Seit ich diese Funktion deaktiviert und die Seite hochgeladen habe, funktioniert der iFrame.

Aktuell setze ich Mobirise Version 5.6.13 ein.

[pinky]

NACHTRAG

Ich kriege die Krise. Es funktioniert nur, wenn ich einen Reload mit gedrückter Shift-Taste durchführe. Vorher hat es funktioniert, jetzt wieder nicht so richtig. Was kann das denn sein?

[Tommy Herrmann]

Moin,

ich habe diese Krise schon längst. Ich habe jetzt eigentlich alles versucht was man sich nur denken kann.

Ich vermute das Problem irgendwo bei der CSS von OpenStreetMap - es muss da einen Konflikt mit Bootstrap oder Mobirsie geben.

Hier die mit eingebettete CSS von OpenStreetMap:

Code: Alles auswählen

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane>svg,
.leaflet-pane>canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
 position:absolute;
 left:0;
 top:0
}
.leaflet-container {
 overflow:hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 -webkit-user-drag:none
}
.leaflet-tile::-moz-selection {
 background:transparent
}
.leaflet-tile::selection {
 background:transparent
}
.leaflet-safari .leaflet-tile {
 image-rendering:-webkit-optimize-contrast
}
.leaflet-safari .leaflet-tile-container {
 width:1600px;
 height:1600px;
 -webkit-transform-origin:0 0
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
 display:block
}
.leaflet-container .leaflet-overlay-pane svg {
 max-width:none !important;
 max-height:none !important
}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
 max-width:none !important;
 max-height:none !important;
 width:auto;
 padding:0
}
.leaflet-container.leaflet-touch-zoom {
 touch-action:pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
 touch-action:none;
 touch-action:pinch-zoom
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
 touch-action:none
}
.leaflet-container {
 -webkit-tap-highlight-color:transparent;
}
.leaflet-container a {
 -webkit-tap-highlight-color:rgba(51,181,229,0.4)
}
.leaflet-tile {
 filter:inherit;
 visibility:hidden
}
.leaflet-tile-loaded {
 visibility:inherit
}
.leaflet-zoom-box {
 width:0;
 height:0;
 box-sizing:border-box;
 z-index:800
}
.leaflet-overlay-pane svg {
 -moz-user-select:none
}
.leaflet-pane {
 z-index:400
}
.leaflet-tile-pane {
 z-index:200
}
.leaflet-overlay-pane {
 z-index:400
}
.leaflet-shadow-pane {
 z-index:500
}
.leaflet-marker-pane {
 z-index:600
}
.leaflet-tooltip-pane {
 z-index:650
}
.leaflet-popup-pane {
 z-index:700
}
.leaflet-map-pane canvas {
 z-index:100
}
.leaflet-map-pane svg {
 z-index:200
}
.leaflet-vml-shape {
 width:1px;
 height:1px
}
.lvml {
 behavior:url(#default#VML);
 display:inline-block;
 position:absolute
}
.leaflet-control {
 position:relative;
 z-index:800;
 pointer-events:visiblePainted;
 pointer-events:auto
}
.leaflet-top,
.leaflet-bottom {
 position:absolute;
 z-index:1000;
 pointer-events:none
}
.leaflet-top {
 top:0
}
.leaflet-right {
 right:0
}
.leaflet-bottom {
 bottom:0
}
.leaflet-left {
 left:0
}
.leaflet-control {
 float:left;
 clear:both
}
.leaflet-right .leaflet-control {
 float:right
}
.leaflet-top .leaflet-control {
 margin-top:10px
}
.leaflet-bottom .leaflet-control {
 margin-bottom:10px
}
.leaflet-left .leaflet-control {
 margin-left:10px
}
.leaflet-right .leaflet-control {
 margin-right:10px
}
.leaflet-fade-anim .leaflet-popup {
 opacity:0;
 transition:opacity 0.2s linear
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
 opacity:1
}
.leaflet-zoom-animated {
 transform-origin:0 0
}
svg.leaflet-zoom-animated {
 will-change:transform
}
.leaflet-zoom-anim .leaflet-zoom-animated {
 transition:transform 0.25s cubic-bezier(0, 0, 0.25, 1)
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
 transition:none
}
.leaflet-zoom-anim .leaflet-zoom-hide {
 visibility:hidden
}
.leaflet-interactive {
 cursor:pointer
}
.leaflet-grab {
 cursor:-webkit-grab;
 cursor:grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
 cursor:crosshair
}
.leaflet-popup-pane,
.leaflet-control {
 cursor:auto
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
 cursor:move;
 cursor:-webkit-grabbing;
 cursor:grabbing
}
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane>svg path,
.leaflet-tile-container {
 pointer-events:none
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane>svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
 pointer-events:visiblePainted;
 pointer-events:auto
}
.leaflet-container {
 background:#ddd;
 outline-offset:1px;
}
.leaflet-container a {
 color:#0078A8
}
.leaflet-zoom-box {
 border:2px dotted #38f;
 background:rgba(255,255,255,0.5)
}
.leaflet-container {
 font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
 font-size:12px;
 font-size:0.75rem;
 line-height:1.5
}
.leaflet-bar {
 box-shadow:0 1px 5px rgba(0,0,0,0.65);
 border-radius:4px
}
.leaflet-bar a {
 background-color:#fff;
 border-bottom:1px solid #ccc;
 width:26px;
 height:26px;
 line-height:26px;
 display:block;
 text-align:center;
 text-decoration:none;
 color:black
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
 background-position:50% 50%;
 background-repeat:no-repeat;
 display:block
}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
 background-color:#f4f4f4
}
.leaflet-bar a:first-child {
 border-top-left-radius:4px;
 border-top-right-radius:4px
}
.leaflet-bar a:last-child {
 border-bottom-left-radius:4px;
 border-bottom-right-radius:4px;
 border-bottom:none
}
.leaflet-bar a.leaflet-disabled {
 cursor:default;
 background-color:#f4f4f4;
 color:#bbb
}
.leaflet-touch .leaflet-bar a {
 width:30px;
 height:30px;
 line-height:30px
}
.leaflet-touch .leaflet-bar a:first-child {
 border-top-left-radius:2px;
 border-top-right-radius:2px
}
.leaflet-touch .leaflet-bar a:last-child {
 border-bottom-left-radius:2px;
 border-bottom-right-radius:2px
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
 font:bold 18px 'Lucida Console', Monaco, monospace;
 text-indent:1px
}
.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out {
 font-size:22px
}
.leaflet-control-layers {
 box-shadow:0 1px 5px rgba(0,0,0,0.4);
 background:#fff;
 border-radius:5px
}
.leaflet-control-layers-toggle {
 background-image:url(/images/layers.png);
 width:36px;
 height:36px
}
.leaflet-retina .leaflet-control-layers-toggle {
 background-image:url(/images/layers-2x.png);
 background-size:26px 26px
}
.leaflet-touch .leaflet-control-layers-toggle {
 width:44px;
 height:44px
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
 display:none
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
 display:block;
 position:relative
}
.leaflet-control-layers-expanded {
 padding:6px 10px 6px 6px;
 color:#333;
 background:#fff
}
.leaflet-control-layers-scrollbar {
 overflow-y:scroll;
 overflow-x:hidden;
 padding-right:5px
}
.leaflet-control-layers-selector {
 margin-top:2px;
 position:relative;
 top:1px
}
.leaflet-control-layers label {
 display:block;
 font-size:13px;
 font-size:1.08333em
}
.leaflet-control-layers-separator {
 height:0;
 border-top:1px solid #ddd;
 margin:5px -10px 5px -6px
}
.leaflet-default-icon-path {
 background-image:url(/images/marker-icon.png)
}
.leaflet-container .leaflet-control-attribution {
 background:#fff;
 background:rgba(255,255,255,0.8);
 margin:0
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
 padding:0 5px;
 color:#333;
 line-height:1.4
}
.leaflet-control-attribution a {
 text-decoration:none
}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
 text-decoration:underline
}
.leaflet-attribution-flag {
 display:inline !important;
 vertical-align:baseline !important;
 width:1em;
 height:0.6669em
}
.leaflet-left .leaflet-control-scale {
 margin-left:5px
}
.leaflet-bottom .leaflet-control-scale {
 margin-bottom:5px
}
.leaflet-control-scale-line {
 border:2px solid #777;
 border-top:none;
 line-height:1.1;
 padding:2px 5px 1px;
 white-space:nowrap;
 overflow:hidden;
 box-sizing:border-box;
 background:#fff;
 background:rgba(255,255,255,0.5)
}
.leaflet-control-scale-line:not(:first-child) {
 border-top:2px solid #777;
 border-bottom:none;
 margin-top:-2px
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
 border-bottom:2px solid #777
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
 box-shadow:none
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
 border:2px solid rgba(0,0,0,0.2);
 background-clip:padding-box
}
.leaflet-popup {
 position:absolute;
 text-align:center;
 margin-bottom:20px
}
.leaflet-popup-content-wrapper {
 padding:1px;
 text-align:left;
 border-radius:12px
}
.leaflet-popup-content {
 margin:13px 24px 13px 20px;
 line-height:1.3;
 font-size:13px;
 font-size:1.08333em;
 min-height:1px
}
.leaflet-popup-content p {
 margin:17px 0;
 margin:1.3em 0
}
.leaflet-popup-tip-container {
 width:40px;
 height:20px;
 position:absolute;
 left:50%;
 margin-top:-1px;
 margin-left:-20px;
 overflow:hidden;
 pointer-events:none
}
.leaflet-popup-tip {
 width:17px;
 height:17px;
 padding:1px;
 margin:-10px auto 0;
 pointer-events:auto;
 transform:rotate(45deg)
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
 background:white;
 color:#333;
 box-shadow:0 3px 14px rgba(0,0,0,0.4)
}
.leaflet-container a.leaflet-popup-close-button {
 position:absolute;
 top:0;
 right:0;
 border:none;
 text-align:center;
 width:24px;
 height:24px;
 font:16px/24px Tahoma, Verdana, sans-serif;
 color:#757575;
 text-decoration:none;
 background:transparent
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
 color:#585858
}
.leaflet-popup-scrolled {
 overflow:auto
}
.leaflet-oldie .leaflet-popup-content-wrapper {
 -ms-zoom:1
}
.leaflet-oldie .leaflet-popup-tip {
 width:24px;
 margin:0 auto;
 -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
 filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
 border:1px solid #999
}
.leaflet-div-icon {
 background:#fff;
 border:1px solid #666
}
.leaflet-tooltip {
 position:absolute;
 padding:6px;
 background-color:#fff;
 border:1px solid #fff;
 border-radius:3px;
 color:#222;
 white-space:nowrap;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 pointer-events:none;
 box-shadow:0 1px 3px rgba(0,0,0,0.4)
}
.leaflet-tooltip.leaflet-interactive {
 cursor:pointer;
 pointer-events:auto
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
 position:absolute;
 pointer-events:none;
 border:6px solid transparent;
 background:transparent;
 content:""
}
.leaflet-tooltip-bottom {
 margin-top:6px
}
.leaflet-tooltip-top {
 margin-top:-6px
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
 left:50%;
 margin-left:-6px
}
.leaflet-tooltip-top:before {
 bottom:0;
 margin-bottom:-12px;
 border-top-color:#fff
}
.leaflet-tooltip-bottom:before {
 top:0;
 margin-top:-12px;
 margin-left:-6px;
 border-bottom-color:#fff
}
.leaflet-tooltip-left {
 margin-left:-6px
}
.leaflet-tooltip-right {
 margin-left:6px
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
 top:50%;
 margin-top:-6px
}
.leaflet-tooltip-left:before {
 right:0;
 margin-right:-12px;
 border-left-color:#fff
}
.leaflet-tooltip-right:before {
 left:0;
 margin-left:-12px;
 border-right-color:#fff
}
@media print {
 .leaflet-control {
  -webkit-print-color-adjust:exact;
  color-adjust:exact;
  print-color-adjust:exact
 }
}
html {
 width:100%;
 height:100%
}
body {
 width:100%;
 height:100%;
 margin:0px
}
#map {
 width:100%;
 height:100%;
}

Wenn ich mein Iframe, wie in meinem Tutorial zu sehen:

https://www.mobirise-tutorials.com/OpenStreetMap.html

Code: Alles auswählen

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=12.738647460937502%2C52.232005085482115%2C14.111938476562502%2C52.78033921634272&amp;layer=mapnik" style="border: 1px solid black"></iframe>

einfach mal außerhalb von Mobirise teste, dann funktioniert es immer und genau wie es soll und in jedem Browser.

Es liegt also irgendwo an der CSS vom Bootstrap oder von Mobirise. Ich finde es aber nicht

Im Forum von OpenStreetMap schreibt niemand etwas zu meiner Frage - schwache Leistung

Gerade eben habe ich das auch mal ins Hersteller-Forum von Mobirise geschrieben, denn ich meine schon gesehen zu haben, dass es dort Leute gibt, die OpenStreetMap in Mobirise eingebaut haben.

https://forums.mobirise.com/discussion/ ... obirise/p1

Ich komme damit leider alleine nicht weiter.


P.S.:

Was mir auch ganz klar aufgefallen ist, an meinem Handy mit einer Display-Breite von 360px - also unter der im Iframe angegebenen Breite von 425px - geht es immer. Dort wird die Karte immer angezeigt. Das muss doch etwas zu bedeuten haben.

In der eingebetteten CSS von OpenStreetMap wird diese Breite und Höhe sowieso auf 100% umgesetzt. Deswegen wird das Iframe in Mobirise auch automatisch die Breite des Block-Containers verwenden und eben nicht die 425px.

Ich vermute, dass sich da irgendwelche CSS von Bootstrap 5 mit der CSS von OpenStreetMap nicht verträgt.

Wenn es ein Problem der Ladezeit wäre, dann dürfte es ja am Smartphone auch nicht funktionieren, tut es aber.

[Klaus]

Ich hatte gestern noch lange Tests gemacht und es sieht nach einem reinen Ladeproblem der Skripte aus.
(Also die Menge der Skripte die von MR geladen werden, nicht der Inhalt.)
Lösung hätte ich auch aber probiert doch erst nur ein loading="lazy" in den iframe:
<iframe loading="lazy" src="..."></iframe>

Entspricht auch dem was ich gestern schon posten wollte und dann offensichtlich vergessen hatte mit in den Beitrag zu hängen:
https://github.com/openstreetmap/openst ... ssues/2531

[Klaus]

OK, bei mir selber hat das mit dem Lazy gerade nicht funkitoniert.

Hier das was bei mir funktioniert aber dann zum neuen Cookie Tool von MR aber erst mal so nicht kompatibel ist.
Wer das noch nicht einstezt kann es ja mal damit probieren.

Beim iFrame muss noch ein id mit dazu und aus dem src wird ein data-src.
Wenn alles geladen ist wird über JS dann aus dem data-src das src "erzeugt".
Enspricht dem was MR jetzt mit dem neuen Cookie Tool auch macht um Skripte, Bilder, iFrame ... später zu laden wenn man zugestimmt hat.

Code: Alles auswählen

<body>

<iframe id="myMap" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" data-src="https://www.openstreetmap.org/export/embed.html?bbox=12.738647460937502%2C52.232005085482115%2C14.111938476562502%2C52.78033921634272&layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/#map=10/52.5070/13.4253">Größere Karte anzeigen</a></small>

<script>
window.onload = function(){
    var myMap = document.getElementById("myMap");
    myMap.src = myMap.dataset.src;
}
</script>

[Klaus]

... und gerade x mal im Edge probiert, da ist es noch schlimmer und da geht auch ab und zu die Lösung mit dem JS nicht.

->KA was das genau ist ...

Ich habs noch mit einem Daily von 2 Sek. gemacht ... na ja sieht nicht so gut aus, hab aber bisher immer funktioniert.
Vielleicht kommt ja auf die Frage im OpenStreetMap Forum was!?

<script>
window.onload = function(){
var myMap = document.getElementById("myMap");
setTimeout(() => { myMap.src = myMap.dataset.src; }, 2000);
}
</script>

[Tommy Herrmann]

Hallo Klaus,

danke für die viele Mühe.

Es ist wirklich komisch. Meinst Du es bringt was einfach auf eine andere (nicht Mobirise) Seite zu packen und die Seite dann mit PHP Include einzubinden?

[Klaus]

Ne PHP bringt da nix weil das im PHP wird ja am Server schon eingebaut und die fertige Seite dann wieder an den Browser geliefert.

Hier mal was ich zum Testen verwendet hab für diejenigen die weiter Basteln möchten.

Die ganzen *.css und *.js muss es für die Tests nicht wirklich geben, sie beschäftigen so wie bei MR Seiten nur den Browser mit Laden was bei nicht vorhanden css und js natürlich nicht geht aber das spielt hier keine Rolle nur "da" müssen die Einträge sein von der Menge her wie bei MR.
Kurz man braucht für Tests NUR den Code (hier unten) in einer Datei auf einem Server.

->Den Code kann man so in z.B. eine index.html auf der lokalen Kiste in das htdocs vom XAMP lagen.
Dann im Chrom einfach http://localhost aufrufen.
Da kann man das richtig schön sehen wenn man dann in den Dev Tools noch das Throttling auf "langesames G3" stellt.
Das Problem ist die "Masse" an css und js die von MR geladen werden ... nimmt man einige raus wird es immer besser.
Ich führe das auf das JS (embeded.js) von OpenStreetMap zurück das je nachdem von sich aus die 0.png läd ... hab zwar etwas im Script von OpenStreetMap geguckt, hab aber keine Lust deren Problem zu lösen.

Code: Alles auswählen

<!DOCTYPE html>
<html  lang="de">
<head>
  
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  
  
  
  <link rel="stylesheet" href="a.css">
  <link rel="stylesheet" href="b.css">
  <link rel="stylesheet" href="c.css">
  <link rel="stylesheet" href="d.css">
  <link rel="stylesheet" href="e.css">
  <link rel="stylesheet" href="f.css">
  <link rel="stylesheet" href="g.css">
  <link rel="stylesheet" href="h.css">
  <link rel="stylesheet" href="i.css">
  <link rel="stylesheet" href="j.css">
  <link rel="stylesheet" href="k.css">
  <link rel="stylesheet" href="l.css">
  <link rel="stylesheet" href="m.css">
  
 
  
  
  

</head>

<body>

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=12.738647460937502%2C52.232005085482115%2C14.111938476562502%2C52.78033921634272&layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/#map=10/52.5070/13.4253">Größere Karte anzeigen</a></small>

<script src="a.js"></script>
<script src="b.js"></script>

</body>
</html>

[Tommy Herrmann]

... ach ja - hier wollte ich ja auch noch zeigen, dass exakt das gleiche Iframe von OpenStreetMap in einer selbst erstellten HTML-Seite vollkommen problemlos lädt:

https://www.mobirise-tutorials.com/Test ... etMap.html

[Klaus]

... ja genau und wenn Da vorher UND nachher ein paar CSS oder Skripte lädst wie ein Dummy das es nicht gibt hast Du genau das gl. Problem wie mit MR dann auch ... die Masse machts.

Code: Alles auswählen

<link rel="stylesheet" href="a.css">
<script src="a.js"></script>

[Tommy Herrmann]

ja - aber das dürfte doch eigentlich nicht sein. Das ist dann doch eher ein Fehler von OpenStreetMap.

[Klaus]

Ja schon bilde ich mir ein ... ich weiß nicht ob die Links passen ... gute Lösung hab ich nicht und weiter suchen mag ich nicht.

https://forum.openstreetmap.org/viewtopic.php?id=68432
https://community.openstreetmap.org/t/s ... _konieczny

[Tommy Herrmann]

Moin,

also ich glaube - bitte mal selbst testen und ausprobieren - dass ich das Problem mit der "OpenStreetMap" im Iframe schlussendlich doch noch lösen konnte.

Ich habe nun eine eigene HTML-Seite erstellt, die ich mittels dem HTML-Tag:

<embed>

... eingebettet habe.

Code: Alles auswählen

<embed src="https://www.mobirise-tutorials.com/OpenStreetMap/OpenStreetMap.html">

Das geht mit absoluter URL (wie im Code oben) oder mit relativer Pfadangabe.

Hier eine Ansicht dieser HTML-Seite als PDF-Datei:

https://www.mobirise-tutorials.com/Open ... -Seite.pdf

Alles weitere auf meiner Seite:

https://www.mobirise-tutorials.com/OpenStreetMap.html

Falls ihr meine Seite zuvor besucht hattet, bitte nicht vergessen den Cache zu löschen, damit die Anzeige korrekt sein kann.

[Tommy Herrmann]

... hat das überhaupt schon jemand gesehen?

Ich habe meine Seite inzwischen so an die Hundert Mal heute aufgerufen und bisher wurde die Karte von OpenStreetMap immer und in jedem Browser angezeigt

https://www.mobirise-tutorials.com/OpenStreetMap.html

[Klaus]

Ja, habs gesehen und werde dass ggf. auch noch in meine fast leere Testseite einbauen ... ob das jetzt die optimale Lösung ist ... erst mal gut dass sie zuverlässig funktioniert.
Wäre jetzt schon interessant (für Programmierer) warum das so ist ... aber zum Forschen fehlt mir wie schon geschrieben die Lust.

[Tommy Herrmann]

Moin,

na ja - "optimal" ist meine Lösung auf gar keinen Fall

Nur haben wir ja inzwischen alles Mögliche probiert und es scheint in Mobirise über den direkten Einbau des üblichen "Iframe" ja nicht zu klappen. Das ist auch bei anderen Mobirise-Usern so.

Daher ist das eine Notlösung - dennoch ist mir das extrem wichtig, denn "Google Maps" hat großes Potential zum Abmahnen, da ja auch hier u.a. "Google Fonts" bereits beim Aufruf der Seite vorgeladen wird und die API von "Google Maps" natürlich auch die Daten von Besuchern abgreift.

Da nutzt es dann gar nichts, wenn wir hier alle wegen der DSGVO "Google Fonts" entfernen und durch lokale Schriften ersetzen, aber "Google Maps" weiter auf der Seite lassen.

Eine Landkarte ist aber für viele unverzichtbar, wie z.B. Hotels, Restaurants, usw. und da ist "OpenStreetMap" dann eine tolle Alternative, die eben den Datenschutzbestimmungen der DSGVO (Datenschutzgrundverordnung) auch entspricht.