This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Yuhki Yamashita
Posted Aug 27 - Read on Facebook

Has anyone ever tried to use maps (e.g., Google Maps, Mapbox) in Framer? Using the embed/iframe approach allows the map to render and be interactive, but doesn't allow for events like drag to propagate to the parent layer. And I'm not having much luck with the JS APIs (I can kind of get it to work when I view my Framer project on the browser, but not in Framer Studio or Frameless; and even then, the event handling is janky). Any pointers appreciated!

6 Comments

Jordan Robert Dobson

Same problem has been around for years. Mostly you want to use the map on a secondary view and not inline with content.

Yuhki Yamashita

Thanks, Jordan. You basically mean that I should have a layer that intercepts the event and passes it programmatically to the iframe, right? The problem I can't solve there is how to send the "drag" event I intercepted to the iframe. Normally, I'd just change the x/y position accordingly and call it a day, but in this particular case, that would just simply move the iframe instead of the map tiles contained by the iframe. Am I maybe missing something?

Jordan Robert Dobson

Can you place anything over the frame?

Yuhki Yamashita

Yeah -- I think it's looking like I need resort to that: place a layer on top of the frame containing the map -- which I'd add using the Google Maps JS API -- that intercept all events. When intercepted, I can programmatically manipulate the map using the Maps APIs. Alternatively, I could listen to certain events (drag, zoom_changed) that Google Maps exposes to do the appropriate thing in Framer.

Either way, it's not looking very promising from a performance/responsiveness perspective. If any one has other ideas, I'd love to hear them!

Jordan Robert Dobson

Honestly, I've tried many times to crack this and resorted to a static map that links to a new view with a full screen map.

Ralph DeMars Gnonlonfoun
Read the entire post on Facebook