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

What is Framer? Join the Community
Return to index
Brendan Stromberger
Posted Jul 28 - Read on Facebook

Hi all, just getting started with Framer and trying to integrate an interactive instance of Google Maps. Anyone have any ideas where I might start? I'd like to use the map as a sublayer such that it'd be masked by my browser image as I pan/zoom.

7 Comments

Koen Bok

I think you should be able to largely follow the tutorial. It's all just javascript. If you want to add the map to a layer you can access the html element in javascript like mapLayer._element

https://developers.google.com/maps/documentation/javascript/tutorial

Brendan Stromberger

Koen Bok is this how I would load Google's JS? Utils.domLoadScriptSync "http://maps.googleapis.com/maps/api/js?key={mykey}"

Koen Bok

Yeah that would work. Or the async method.

Noah Levin

Aidan Simpson has played with this sort of thing before I think

Aidan Simpson

Hey Brendan Stromberger, Yes I followed the tutorial and included the DOM element in my projects js file (Layer.html = "<div id='map-canvas'></div>"). Also play around with the map options to hide default UI etc (https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions). Reach out if you have any issues.

Brendan Stromberger

Thanks for the insight, Aidan. Were you able to emulate pan/zoom actions?

Aidan Simpson

Yes, these should all work out of the box with the API

Read the entire post on Facebook