Google Maps Embed in Webflow

My client is a rock climber and I built a website so people can book him and he can teach them on how to rock climb. I designed and built it in Figma and Webflow. There are many parts of the website such as a blog, a workout video library, and a photo gallery of all his latest adventures. He also climbs with his cat, which is badass. I wanted to do something special for the gallery page. But what can I do?

Well, what about a map?

That way, anyone looking at the photos can see where they were taken on a map. My client loved the idea so I went about trying to find a solution to implement. Learning to run before I can walk. Classic Nabil.

Of course, with most software solutions these days, it wasn’t free, or it was too complicated. Keep in mind that I wouldn’t be the one adding these to the gallery. It’s CMS-based, so my client will do all the work, and I don’t want him to deal with any complicated coding or anything technical. Make it easy for your clients and they will love you.

The solution? iframes embed in Webflow.

Go to a location on Google Maps and hit share. You will notice an embed tab. Copy the HTML. This is the iframe code you will be adding to the CMS. But where will you add it?

There isn’t an option to add code embed or an iframe in Webflow. Well… not directly at least. But you have something a bit more interesting at your disposal—the Rich Text field. You can add photos, videos, and even YouTube links and it will generate a video player inside the field. And, code embeds.

So that’s exactly what I did. I even added a hint for my client. Additionally, I created Loom videos for my client on how to use Webflow to add and update content.

Whenever my client needs to add a new gallery that consists of a location, he just copies the iframe from Google Maps and pastes it into the code editor.

Of course, since it is custom code, it won’t be viewable in the designer. Publish and you will see the map update.

And there you go! The map adds another layer of interactivity to photo galleries. Granted it is not the most ideal solution. But I wasn't going to pay money just to add this one small thing. It's not a necessity but a nice to have. So far my client has had no issue with it and has been adding new albums to his galleries, all with their own maps! Oh and one more thing. Not every gallery will have a map so remember to make sure that the map and address will only be visible if there is an embed code.

Check out the full website at https://www.austinelevatedascents.com

. And if you live in the Boulder, CO area and are interested in learning how to rock climb, hit up Austin! He is extremely friendly and very knowledgeable about using rock climbing as a way to improve one's mental health.