Sep 24, 2021 • Blog

6 Ways to Display a Map on a Website

facebook iconx icon

Contents

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.

map-on-a-website-Civitatis

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-map-layer

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.

Civitatis-map-layer

Bottom of the page

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

Searcy’s-map-on-a-website

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

Searcy’s-map-on-a-website

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.

Selfridges-map-on-a-website

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.

Selfridges-map-on-a-website

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.

walmart-map-on-a-website

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.

walmart-map-on-a-website

Pop up

map-on-a-website-booking.com
map-on-a-website-booking.com

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.

Mobile

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

map-on-a-website-fouresquare

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. 

fouresquare-mobile-view

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.

DOWNLOAD  SITE SEARCH E-BOOK

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

 

facebook iconx icon

Contents

Calculate thousands of travel times with the TravelTime API

Discover more
cta accent icon