Mobirise-Tutorials.com

GIbt es eigentlich inzwischen eine Lösung für die Anzeige von Openstreetmap?
Ich habe immer sporadisch eine Welt-Anzeige

Frank

Moin,

ja - genau dieses Problem hatte ich auch und habe bisher nicht herausfinden können woran das liegt. Wahrscheinlich wird durch Mobirise zu viel Zeugs geladen sodass die Karte vorher aufgibt.

So kam ich auf die Idee ein ganz einfache Webseite händisch zu erstellen und dort das Iframe zu "Openstreetmap.org" zu verwenden.

Bei mir scheint das so zu gehen - zumindest, wenn Du die Karte nicht Hundert Mal direkt nacheinander neu lädst.

Probiere es mal - Du brauchst ja nur den Code zu kopieren und dann Dein Iframe zur Karte da rein machen.

Gucke mal mein dazu erstelltes Tutorial hier an:

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

... ich habe dann meine händisch erstellte Webseite so eingebettet

Code: Alles auswählen

<!-- Karte von OpenStreetMap einbetten, die ich auf eigener HTML-Seite erstellt habe -->
<embed src="https://www.mobirise-tutorials.com/OpenStreetMap/OpenStreetMap.html">

Hier der Quelltext meiner händisch erstellten Seite - steht aber auch alles auf meiner Tutorial-Seite, dort auch noch etwas CSS zur Karte, damit das auch am Handy richtig aussieht.

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">

    <head>
    
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>OpenStreetMap</title>

        <!-- Script prevents calling only this page directly -->
        <!-- Skript verhindert den direkten Aufruf von nur dieser Seite -->
        <script type="text/javascript">
            if ( self == top ) { location.href = "../OpenStreetMap.html"; }
        </script>  

    </head>
    
    <body>

        <!-- Karte von OpenStreetMaps -->
        <iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=12.451629638671877%2C52.25050528572614%2C14.305572509765627%2C52.79861002821915&amp;layer=mapnik&amp;marker=52.525412581659985%2C13.37860107421875" style="border: 1px solid black"></iframe>

    </body>
    
</html>

CSS:

Zum einen habe ich hier dem Selektor "embed" die Breite von 100% meines Textblocks und eine feste Höhe von 400px gegeben. Diese Höhe müsst ihr ca. 80 bis 100 Pixel höher als die im Iframe eingetragen Höhe angeben, damit ein Überlauf und somit ein Scrollbalken vermieden wird.

Zum anderen habe ich mir noch die class="eigen" erstellt, damit ich meine Links etwas formatieren kann:

Code: Alles auswählen

embed {
  width: 100%;
  height: 400px;
}
.eigen {
  font-size: 12px;
}

Ah ja.
Danke für den Tipp!

Warum nicht die Karte direkt "embedden"?

Wenn Du das probieren solltest, dann berichte mal wie es bei Dir klappt - oder auch nicht.

Testen ist sehr schlecht, es geht ja manchmal und manchmal nicht.
Da scheint es wenig gesetzmäßigkeit zu geben.

Bitte mal testen.
Habe das EMBED direkt auf die Karte angewendet ohne Zwischen-Seite

https://www.tierphysio-morsbach.de/

ja - also meine Variante sollte eben immer funktionieren - bei mir tut sie das zumindest.

Ich habe das jetzt seit Wochen am Laufen.

Du brauchst doch lediglich meine händisch erstellte Seite, so wie sie ist - ohne das Skript um einen direkten Aufruf zu verhindern - mal zum Testen auf den Server kopieren - also so:

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

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">

    <head>
    
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>OpenStreetMap</title>

        <!-- Script prevents calling only this page directly -->
        <!-- Skript verhindert den direkten Aufruf von nur dieser Seite - jetzt deaktiviert 
        <script type="text/javascript">
            if ( self == top ) { location.href = "../OpenStreetMap.html"; }
        </script>  -->

    </head>
    
    <body>

        <!-- Karte von OpenStreetMaps -->
        <iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=12.451629638671877%2C52.25050528572614%2C14.305572509765627%2C52.79861002821915&amp;layer=mapnik&amp;marker=52.525412581659985%2C13.37860107421875" style="border: 1px solid black"></iframe>

    </body>
    
</html>

stobi_de hat geschrieben: Mo 19. Dez 2022, 08:04 Bitte mal testen.
Habe das EMBED direkt auf die Karte angewendet ohne Zwischen-Seite

https://www.tierphysio-morsbach.de/

Es wurde gleich angezeigt - das hat aber noch nicht viel zu sagen denn ...

... das ist eben nicht logisch - denn wenn diese Zwischenseite fehlt, dann kannst Du doch auch beim Iframe bleiben.

Es ist aber eventuell auch möglich, dass das Iframe in Mobirise ein Problem macht.

Habe ich schon gemacht!
Funktioniert aber.
Dann habe ich halt das embed mal direkt statt der externen Datei eingetragen - klappt auch.

Es scheint einen Unterschied im Timing zu geben.
Habe julia in 3 Browsern getestet

Das Iframe ist ja völlig unauffällig in Mobi eingebaut.
Sieht mir auf den ersten Blick nicht nach irgendeinem Mobi-Scheiß aus

OK - dann beobachte das mal eine Weile.

Sonst ändere ich das auch wieder - ich fand das unlogisch

Beides erzeugt ja lediglich einen Frame.

In der bootstrap.min.css wird das "Iframe" angesprochen, "embed" dagegen nicht. Vielleicht hat es damit zu tun.

Code: Alles auswählen

iframe{border:0}

Also hier habe ich das Openstreetmap via IFrame im Footer
https://www.raebsch-trockenbau.de/
Zeigt hier in Salzburg nachvollziehbar die Weltkarte

Bei Zimmermann Zerspanungstechnik habe ich die Karte nicht im Footer, sondern als eigenen Block.
Zeigt den richtigen Ausschnitt via IFrame
https://www.zz-hagen.de/

Bei Julia Hallenberg ist es jetzt via Embed im Footer drin. Zeigt zuverlässig den richtigen Ausschnitt an
https://www.tierphysio-morsbach.de/

Bei mir wird gerade auch der erste Link im Iframe sogleich richtig dargestellt.

Das ist es eben - im Iframe wird es mal richtig und mal falsch dargestellt - oder ist dieser Fehler vielleicht behoben worden?!

... ich habe das jetzt auch mal direkt mit dem HTML-Tag <embed> eingebaut:

https://www.mobirise-tutorials.com/Open ... rekt-Embed

... achte aber auf den richtigen Syntax mit den zugelassenen Parametern für <embed>.

Hier beispielhaft meine Karte:

Code: Alles auswählen

<embed style="border: 1px solid black" width="100%" height="350" type="text/html" src="https://www.openstreetmap.org/export/embed.html?bbox=12.451629638671877%2C52.25050528572614%2C14.305572509765627%2C52.79861002821915&layer=mapnik&marker=52.525412581659985%2C13.37860107421875">

Mobirise-Tutorials.com

Openstreetmap?

Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?

Re: Openstreetmap?