Maps and directions on a mobile website: get visitors there

Key takeaways

Directions on a website matter most on a phone, where the visitor may be minutes from setting off. An embedded map looks helpful and often is not: it is heavy, awkward to use with a thumb and does not start navigation. A plain 'Get directions' button that opens the visitor's own maps app does the job better and faster.

• A 'Get directions' link opens the maps app with your address as the destination.
• Embedded maps add weight and can trap scrolling on a phone.
• Show the address, opening hours and parking in text beside the link.
• Your address must match your Google Business Profile exactly.

What do mobile visitors need from a location page?

A mobile visitor looking for your location needs four things quickly: where you are, whether you are open, how to get there and how to call if they get lost. Everything else on the contact page is secondary. On a phone those four should fit in the first screen or two.

This is a high-intent moment. Someone checking directions has usually decided to come. The page's job is to remove the last obstacles, such as an ambiguous entrance, no parking information or opening hours that turn out to be wrong.

• Why mobile-friendly web design is essential for UK businesses
• Near me searches: what your website must do on a phone

How do you add a directions link?

Use a maps URL. Google's Maps URLs are a documented, free link format that opens Google Maps on any device, in the app if it is installed or in the browser if not, with your address set as the destination. No account or code library is needed. The link is added to a button labelled 'Get directions'.

Make the address itself tappable as well. Many visitors will tap the address expecting it to open a map. And include the postcode in text, since plenty of people still type it into a sat nav.

• A 'Get directions' button near the top of the contact or location page.
• The destination set to your business name and address, not just coordinates.
• The written address as a link to the same destination.
• The postcode in plain text for sat nav users.
• The same button in the footer or a sticky bar on location-led sites.

• Sticky call-to-action bars on mobile: when they work

Why are embedded maps a problem on mobile?

Embedded maps cause three problems on phones. They are heavy, loading scripts and map tiles that slow the page. They capture touch, so a visitor trying to scroll down the page ends up panning the map instead. And they are small, showing a few streets in a box where the visitor's own maps app would show the whole route.

If you want a map on the page, use a static image of the map that links to directions, or load the interactive map only when the visitor taps it. Either keeps the page light and the scrolling predictable.

• Why is your mobile PageSpeed score lower than desktop?
• Website scrolls sideways on mobile? Causes and fixes

What else should sit beside the directions?

Practical details in text. The things people ask when they phone from the car park belong on the page: which entrance, where to park, whether there is step-free access, what the nearest station is. A photograph of the shopfront helps people recognise the place when they arrive.

• Opening hours, including bank holiday changes.
• Parking: where, how much and any time limits.
• Public transport: nearest station or bus stop and walking time.
• Access: step-free entrance, lift, accessible toilet.
• A photo of the entrance as seen from the street.
• A tap-to-call number for anyone who cannot find you.

• Click-to-call: turn mobile visitors into phone calls

How does this connect to local search?

Your website's address details should match your Google Business Profile character for character. Google says local results are based mainly on relevance, distance and prominence, and consistent business information across the web supports how confidently it can place you. A different suite number or an old phone number on the site undermines that.

Add LocalBusiness structured data to the page with the same name, address, phone number, opening hours and coordinates. It helps search engines read the details reliably. For multi-site businesses, each location needs its own page with its own details and directions link.

• Local SEO for a small business website
• Schema markup for small business websites

When do you not need directions at all?

You do not need directions if customers never visit you. A tradesperson working from home, an online shop or a remote consultancy should not publish a home address for the sake of a map. State the areas you serve in text instead, and make calling or messaging the primary action.

For businesses with premises open only by appointment, say so beside the address. A directions button without that note invites people to turn up unannounced.

• Mobile websites for tradespeople: win the urgent job

What does this look like in practice?

A pattern we see on contact pages: a large embedded map fills the first screen on a phone. The visitor swipes to scroll past it and the map pans instead. Below it, the address is an image, the opening hours are missing and there is no directions link, so the visitor copies the postcode by memory into another app.

Replacing the embed with a 'Get directions' button, a tappable address, hours and a parking note makes the page shorter and far more useful. Global Bridge Labs (GBL) treats the contact page as a task page on mobile: get there, or get in touch.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Location page checklist

• Add a 'Get directions' button that opens the maps app.
• Make the written address a link and show the postcode in text.
• Replace heavy embedded maps with a static image or tap-to-load map.
• List opening hours, parking, transport and access details.
• Match every detail to your Google Business Profile.
• Add LocalBusiness structured data.
• Test the directions link on an iPhone and an Android phone.

Next step

Open your contact page on a phone and try to start navigation to your own premises. If it takes more than one tap, add the button.