Adding a Map with only custom locations

Hello everyone!

I am trying to include a map that will show only locations that I have specified. Reason is that I am building a website for a real estate client that wants to show specific things in the neighborhood of another building. But they really only want the chosen places to show up as pins/headings, so not the default locations google map would show.

Of course I could just create a graphic with the locations but I would really like to achieve something a bit more dynamic. Ideally, I would just use a custom google map where I remove all labels, take a screenshot of it and upload it as an image in Webflow and that add & style the labels with headings in Webflow. However, my problem here is that I want the map to be full screen size (width & height) and even when I use absolute position for headings and % for margins, the headings I added as labels will never exactly stay in the spot when resizing the browser. If someone has a solution for this, please let me know.

Or if maybe there is an external provider that offers map customization like this?

As an example: if you open this page: Classy – Nestin Theme and scroll down to the section ‘True value is always inside’, there is an image with 5 numbered labels, no matter how you resize the browser, these labels/numbers stay in the same spot of the image. I see this quite often on websites. How can I achieve this in Webflow?

Here is also a read only link to a test project: https://preview.webflow.com/preview/testmap1?utm_medium=preview_link&utm_source=designer&utm_content=testmap1&preview=bd3e386d307c6add3b1c0b9b141092f0&mode=preview

It has the map I need with labels added via photoshop and one ‘test heading’ to see how I could ‘pin’ this heading to one of the locations no matter of browser size.

Would appreciate any help!