6 ways to display a map on a website

by Niharika Sisodia
on Dec 10, 2018

A clear and simple map on a website can lead users to take the desired action, like visiting a restaurant, taking a journey or buying a product. An effective map display can turn a web visitor into a customer. A badly placed map can create confusion and cause potential customers to leave the site.

Let’s take a look at some examples.

Top of the page

Civitatis display their London city map at the top of the page. This map is clear, bold and interactive. It is the first thing the user sees, so they can immediately start searching.


Civitatis layer the search bar on top of the map. This display means that space is not taken up by the search bar and that the map is easy to see.


Civitatis list points of interest on the right-hand side of the page, including icons that correspond to the map. This design simplifies the search for the user. The commonly used icons make it easy to understand. For example, the aeroplane icon is easy to interpret without needing the user to read the text.


Bottom of the page

Searcy’s at King’s Cross St. Pancras head their ‘Contact’ page with a photo of the bar.


The map is displayed at the bottom of the page, following opening times and information about Christmas and New Year.


Searcy’s have prioritised the information that allows customers to get in touch and added a map for additional information. This is a great place if the map is not integral to the user but may be useful.  

Separate page

Like Searcys, Selfridges know that customers usually require more than a map to drive customers to their location. Selfridges displays opening times and the map side by side. Customers can also link to a full page google map of the store’s location.


The links to the map, ‘view map’ and ‘get directions’ are bold and clear. This interface may be used by the website provider because it’s simple. However, clicking one of these links takes the user off the Selfridges website to Google, making them less likely to purchase an item online. It also can be hard to track conversions once off the site and starting a new session.


The link also highlights the location of multiple other stores but does not directly indicate where Selfridges is situated. This could cause the user to become distracted by other points of interest on the map.

Whole page

By contrast, the US brand, Walmart, has created a dedicated store finder page on their website. A big brand, such as Walmart, have stores across the United States. A search on their store finder could bring up multiple results. Walmart has given their map view an entire page.


This stops the page from looking cluttered. Clicking on an item from the list view changes the colour of the corresponding map icon. The details of the store, such as opening times, services and directions can also be found.


Pop up



Booking.com initially shows a list view, but gives the option to view the list and map side by side in a pop-up screen. The split page map and list view allow the user to view the details of each hotel and visualise the location on a map at the same time. Users can also add additional filters, such as price range and hotel facilities to narrow down the results.


Foursquare’s app allows users to search for points of interest in their local area. While the desktop view shows the maps and list view side by side, Foursquare have chosen a different design for mobile.

Desktop view


Users see a list view and can click to see a corresponding map. This feature means that the screen does not become cluttered. As screen size is smaller on a mobile device displaying information clearly improves the user experience.

fouresquare-mobile-view fouresquare-mobile-view

On the map view, the numbered icons correspond to the list view. The list view information is displayed at the bottom of the screen for the selected icon. If the user then selects a new pin, the information changes at the bottom of the screen. 


This feature allows the user to quickly assess the points of interest in relation to their location without having to switch between the list and map view.


To find out more about how maps can help your business. To discuss your bespoke project, get in touch.



Isochrone analysis made easy

Isochrone analysis simplified. Learn how to use isochrone analysis in mapping. Improve customer service, logistics or plan an office relocation using isochrones analysis techniques. Save time and costs, and retain staff using the TravelTime platform.

Niharika Sisodia Mar 25, 2019

How to make the perfect store locator website

Follow these tips to create a store locator page that will convert site visitors into customers at your physical store. Optimise your store locator website page to improve the user experience.

Niharika Sisodia Mar 20, 2019

Site search box design inspiration

Perfect your site search box design. Use these tips to make your site search box easy to use. Improve user experience by anticipating how users search. Place your site search box in the best location and add filters that will save your users time.

Niharika Sisodia Mar 20, 2019

Isochrone map design inspiration

Perfect your isochrone map design. Use these tips to make your isochrone map easy to understand. Improve user experience by creating a simple and aesthetically pleasing isochrone map.

Niharika Sisodia Feb 7, 2019

5 retail web design tips for a store locator page

Reimagine your retail web design. Improve the user experience of your store locator page and convert site visitors into customers using these top 5 tips.

Niharika Sisodia Jan 30, 2019

Why geocode?

Why geocode? Discover uses for geocoding in business. Find out the key benefits of geocoding and how geocoding can be implemented to improve your business.

Niharika Sisodia Jan 21, 2019