Integrating maps into your website

Sasha Shevelev
Sasha Shevelev 20 October 2023

If a picture speaks a thousands words, a map must speak a million. Maps can solve some of the most complex UX problems and, if done right, keep users engaged on your site for longer.

Why are maps used on websites?

A map is one of the oldest forms of navigation, and something that has seamlessly transitioned to the digital age.  Although Google offers a wealth of mapping options, these are generally hosted externally so require directing a user away from your website, or embedding a clunky map onto your page which is both hard to use and affects the speed or flow of your site. 

A custom map solution can solve some of the most complex user experience problems. It offers an engaging way for a user to explore an area, find a location, or direct from point A to point B.

We have implemented successful mapping solutions for many of our clients. Let's review some of the common use cases for using maps on a website;

1. Direction and navigation

Help users find their way to you by plotting your physical office locations on a map. We implemented an 'Office finder' for Sarina Russo, which displays the distance in kilometres between the office and the user's location, and provides important contact office details - all without leaving the website.

A user can even share their geo-location to pin-point exactly where they are without having to type in an address or suburb.

srg-map

If you have a large venue or space, a digital way-finding map can be invaluable for patrons. You can plot important points-of-interest, and even plot 'step-by-step tours' within your establishment. We successfully produced something similar for The Royal Botanic Garden Sydney.

rbg-map

 

Here's another example implementation for Sundowners Overland. The 21 day journey through Central Asia is visually represented by the stylised map which remains in-view on the right-hand side of the screen. In this instance, the map is not interactive, but works to enhance and explain the journey visually rather than relying on reams of text to explain the journey.

sundowners-map

 

2. Display points of interest

Plot hundreds of venues on a map, allowing a user to find what's close to them. Including custom-built filter options to narrow down the number of results makes this a powerful mapping tool that can massively increase conversions. 

Perfect for displaying events, venues, multiple restaurants etc. Check out the 'find event' mapping solution below which we produced for City of Newcastle's: WhatsOn.

whatson-map

It's not always suitable to display a cluster of pins for each location. Sometimes you need to visually convey your global reach as a company, on a world-scale map. In this example we utilised darker tones to illustrate the countries Nanosonics operate in. Both the map, and the list of countries, can be interacted with to reveal additional information.

In addition, the map is simplified and stylised to match Nanosonics' brand identity.

nanosonics-map

3. Data visualisation

Display location-specific data using different colours, styles and infographics to present what would normally be dull 'tabular data' but in a visual format. These maps can be stylised, as they don't necessarily need as much detail as a navigational map. 

This can be achieved using data visualisation tools such as TableauAM ChartsESRI Mapping software. The below example for the Australian Institute of Health and Welfare was produced using ESRI, and included accompanying infographics and statistics to support the map content. We then displayed several maps and infographics on a data-driven dashboard.

aihw-map

Pre-built solutions

For most common use-cases there's a pre-built solution which can be called upon to speed up the development process, saving both time and money. 

We have recently found a 'no-code' mapping solution which is affordable, feature-packed, customisable, and the content is editable within Google Sheets - meaning clients can edit the map content themselves without the need for a developer or a complex CMS setup. This tool is called NoCodeMapApp.

Here's an example of a 'test setup' we created using the tool. As you can see it's fully responsive. Looks good, right?

nocodemapap-map

This tool can be considered a middle-ground between a custom-built solution, and a google map embed. It wont be suitable for every use case, but should cover a range of common scenarios such as displaying events, properties, or office locations etc…

We can also utilise other mapping solutions where appropriate, such as;

  • ImageMapPro - Perfect for simplified maps such as floor-plans and world maps.

  • Mapplic - Also great for floor-plans and simplified stylised maps.

  • Google Maps Quick Builder - Simple map embeds, but offers little customisation.

  • ESRI Map Software - Powerful mapping & spatial analytics tool, suited to more complex maps containing several data layers. 

Can't I just link to Google Maps?

Yes, and no...

Google offers some great services out of the box which cater for simple implementations - such as displaying a single office location on a map. Without a custom solution, for more advanced requirements you would need to direct users away from your website – losing your user, and any potential conversion in the process.

Here's a brief summary for some of the benefits of a custom solution;

  • Keep users engaged and retain them on your website.

  • Full control over styling so the map can match your branding, and feel at home on the rest of your site.

  • Extend and customise the experience to suit your user's specific needs. Such as offering filtering, highlighting routes, and even zoning in to a user's current location. No compromises here - don't be constrained by what comes out-of-the-box. At Webcoda, we like to think outside of it.

Interested?

If any of the above sounds of interest, or you just want to find out more about how a mapping solution could benefit your website, let's chat! We have worked on hundreds of different mapping implementations across all different technologies and devices.

If you want any information on any of our services such as user experience design, web design, web development, intranet sites, e-commerce or SEO – we can discuss that too.