Streaming live at 10am (PST)

OpenStreet Maps embedding code so size of map is adjustable

Some of my customers would like me to embed an OpenStreet map instead of a Google map. This is no problem for a fixed size. Yet it would be great to have the option to have the map for example 100 VW and 30 VH. I would be happy to receive hints how to adjust the imported code and/or how to adjust the settings of div containing the code.

Here is my site Read-Only:

@kurt You mean this?

Hi Matthias, thank you. I tried, but it does not work. It resizes the map to 100 px instead of 100% within the div. Maybe within an iframe certain code does not apply.

I tried it too and it worked. Have you added the “%”? And add

1 Like

Oh nice! I didn’t realize it is possible to ad size etc. to the HTML element itself.
Thank you!

I have included the map in a website … works fine. Now I just would like to stop zoom on mouse scrolling. The code it reads: scrolling=“no” but that apparently doesn’t stop it.

page: Buchung

Hi @kurt you need some custom code for this:

    .open-maps {
        pointer-events: none;

and add a class name to your maps

more elegant way:

Hi Matthias, thank you for your help. I know almost nothing about code. So one more question: I inserted this here: > settings > custom attributes. But it does not change. Maybe I did it the wrong way. Or should it be included via HTML-code editor? If so, should I delete what is right now between =mapnik" and ></iframe when inserting style=„pointer-events: none;“?

Bildschirmfoto 2020-03-19 um 09.02.12


  • select your “open-map” item
  • go to “HTML-Embed Settings”
  • press “Open Code Editor”
  • scroll to "style=“border: 1px solid black;”
  • add behind the “;” "pointer-events: none; "
1 Like

Hi Matthias, thank you again. I really appreciate your support.
I changed the code:

Karte in neuem Fenster anzeigen

But the Zoom on Scrolling is still there. The results in Safari, Chrome and Firefox are identical.

Because your code is not exact:

1 Like

Yes, you are right! Thank you – now it works!