5 Popular Interactive Map Components5 Popular Interactive Map Components

Location-based design has never been easier thanks to these powerful premade components.


Addison Schultz

February 20, 2020

As the way we behave as consumers is evolving maps are becoming more and more common in digital products. Food delivery, online shopping, and hotel bookings—none of these experiences would be the same without interactive maps.

In the past, when product designers wanted to include a map in their prototype, they’d have to imagine how it could work with a flat image as a placeholder. Now, Framer is unlocking the power of real, working components, helping designers realize their vision during from the design phase.

Here are a handful of my favorite components for bringing your location-based ideas to life in Framer.


Mapbox component available in Framer

Mapbox is a location data platform that can be used when creating mobile and web applications. With an impressive list of clients, such as Snap, Facebook, and Lonely Planet, the real power of Mapbox comes from the easy-to-use Mapbox Studio

After creating a Mapbox account, you can design your own maps and then simply copy the style URL and paste it into the Mapbox Component in Framer to see it in action. Not only can you design your map using colors and shapes, you can also include things like GeoJSON data, line and navigation data, and much more.

There’s also a static version of the component if you don’t need it to be interactive. With all the same features to customize the look and feel of the map, you can use this version to help save on performance if you’re working on large projects.

Check out the webinar I co-hosted with Mapbox to learn more about how to use this component in Framer.

Check out the Mapbox package

Carto Maps

Carto component available in Framer

Carto is a company that combines user data and analytics to create interactive maps. This component, created by the Carto team, gives you lots of options for customization. Choose from one of three basemaps (light, dark, or voyager), select a starting location, adjust the zoom level, and more to make it work for your prototype.

Check out the Carto Maps package

Like what you’re reading?

Sign up to our email list to get the best of the Framer blog sent directly to your inbox.

Google Maps

Google Maps component available in Framer

You’ve definitely heard of Google Maps before, but did you know you can use it in your Framer projects? This component is really easy to integrate into your prototypes. Simply drag it onto the canvas, configure your options, and preview to see it in action.

There’s also a static version that can help with performance if you’re working on a large project. The static map isn’t interactive but gives you options so you can configure how it looks.

Check out the Google Maps package

Apple Maps

Apple Maps component available in Framer

Apple Maps is another component available in Framer, perfect if you are designing iOS style apps. Just like the Google Maps component, this one also lets you specify a location and zoom level so you can make it look the way you want in your prototype.

Check out the Apple Maps package

Location Icons

Location Icons component available in Framer

There are plenty of icon packages on the store, but this collection is specifically tailored to use with maps. You’ll find pins, globes. maps, route illustrations, and more. They are also free for commercial use which is a big bonus.

Check out the Location Icons package

The range of free, premade components is a huge factor in what makes Framer the powerful tool it is today. What’s amazing is that this range is growing every week off the back of our community’s generous contributions.

If you have any suggestions, questions, or need help using any of the packages in this post, feel free to reach out to me on Twitter.

Plus, check out the other posts in this series:

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.