4 min read

How To Make The Best Interactive Map

Design Best Practices From Some Of The Web's Best Map Developers


Making a map for a website can be a daunting task.  Some of the largest websites on the web are map-centric and have had massive amounts of resources to develop interactive experiences.  So the question is, with limited budget, what are the main things to keep in mind as you make a map?  We have summarized some of the biggest design trends in modern map making and hope you find them useful in building your maps.

Use Color To Your Advantage

Some guiding principals in using color on your map:  1) Areas with pops of color draw more attention than elements without 2) The most important information on the map should attract most of your user’s attention.  With these two things in mind, we generally recommend a basemap that only has information that is relevant to your users.   Monochromatic maps do a great job of highlighting locations.  In the example from UBER below, they use a grayscale basemap with color only around the arrival and destination area and it really guides the user’s eyes and therefore their understanding of how to interact with the map.

Maps To The Right, Functionality to The Left

Real estate sites like Zillow and Trulia and vacation rental sites like Homeaway and Airbnb all follow the same design standard of having a split screen with map functionality and viewing on the right hand side of the screen and functionality panels on the left.  This design norm helps situate users and gives them a comfortable experience to navigate.

Major functionality is listed in the left panel. Map experiences are on the right split of the screen.

Make Your Map Markers Functional

Map markers have come a long way from the classic “pin”.  Modern map markers take on some serious functionality that include visualizing underlying content.  The classic pin marker typically had some text tooltips that might show the phone number or lat/long of the location but modern markers should show comprehensive information including photos, videos, iconography and contact information.   AirBNB does a great job of this, allowing users to select a property in a map and scroll through photos without leaving their browsing experience.  You can also see the # of bedrooms/baths and the cost per night.  This is a great map experience for users who are browsing.

Make it Mobile Friendly

Today’s consumers are ready to connect with your business on screens of all types and sizes. That’s a huge new opportunity, but only if your website is designed to give customers what they need on smaller smartphone screens as well as tablets and desktops.  That’s especially true on screens of 7” or less, where space is at a premium. There are now 1.5 billion mobile subscribers globally, with an astonishing growth rate of 31% . In the U.S., smartphone adoption has passed 61%. Making your maps mobile friendly is key to making your map be a successful asset for your company.   One of the biggest ways to make your map mobile friendly is to allow your map to be viewed in full screen mode or switch to a “list” mode where only content elements are displayed.  This allows users who prefer to scroll on mobile easy access to the content they are seeking.  Again, AirBNB shows us a great example of how to do this on mobile.

Airbnb’s Map has a button in the bottom center of their maps to switch from map to list mode and another button that has a full screen take over for filters.

Don’t Take Users Away From The Map

Most map experiences whisk users off the map when they actually want to “take action” but this is a experience trend that we believe to be changing.  Allowing for action directly from your marker is becoming the norm.  Breather, a site for booking office space, is a great example of this functionality.  When you click on a location, Breather allows for instant booking of that location within the map pane on the left hand side of the screen.  The experience and consistency is phenomenal and allows a user to take action immediately and within the current context of their searching.

The left pane of the map experience allows for instant booking. We hope this map design trend continues to gain adoption!