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: https://preview.webflow.com/preview/open-street-map?utm_medium=preview_link&utm_source=dashboard&utm_content=open-street-map&preview=c4f4f8e45fa01e54f30959f3cbea5401&mode=preview

@kurt You mean this?
image

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
image

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
https://mio-konferenz.webflow.io/buchung

https://preview.webflow.com/preview/mio-konferenz?utm_medium=preview_link&utm_source=dashboard&utm_content=mio-konferenz&preview=8a29c6fc00431f0a6d06d1161aa88666&mode=preview

Hi @kurt you need some custom code for this:

<style>
    .open-maps {
        pointer-events: none;
    }
</style> 

and add a class name to your maps
image

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

@kurt

  • 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!