SiteSmith

Putting a map and directions on your website

SiteSmith · · 5 min read

If customers come to your shop, office or studio, your website should show where you are in two ways: a map they can open in their own phone's map app, and a few lines of plain directions that a map cannot give, like where to park and which door to use. You can embed a Google map in the page or simply link to your listing in Google Maps or Apple Maps. Here is how to choose, how to do each, and what to write next to it.

An embedded map is a small, live Google map inside your page. Visitors can see the street and zoom. It looks reassuring and is easy to add on most builders. The downsides: it adds weight to the page and loads Google's code for every visitor, it can trap a thumb that is trying to scroll past it on a phone, and the map is only as right as the pin.

A link to the map is a button such as "Open in Google Maps" or "Get directions". When tapped on a phone, it opens the map app with your business already selected, ready to start navigation. It loads instantly and works on every phone.

For most small businesses, the best answer is both: a small embedded map on the contact page for people browsing on a computer, and a clear "Get directions" button for people on phones. If your page is slow or crowded, the link alone is fine.

How to embed a Google map

  1. Open Google Maps on a computer and search for your business by name, so the map shows your listing rather than just the street address.
  2. Click Share, then the Embed a map tab.
  3. Pick a size and copy the code it gives you.
  4. In your website editor, add an "Embed" or "HTML" block where you want the map and paste the code. Most builders also have a "Map" block where you just type the address.

Choose a zoom level that shows the cross streets a visitor would recognize, not the whole city. On a phone, a short map, about a third of the screen tall, leaves room to scroll past it.

The simplest version is a link to your business in Google Maps:

  1. Search for your business in Google Maps.
  2. Click Share and Copy link.
  3. On your website, make a button with the words "Get directions" and paste that link as its address.

Some people prefer Apple Maps, which is the default on iPhones. You can offer both as two small links, "Google Maps" and "Apple Maps", or just the Google link, which iPhones open in the browser or the Google Maps app if installed.

Check the pin before anything else

A map is only useful if the pin is in the right place. New buildings, rural addresses, strip malls and business parks often get pinned to the wrong side of the road or the wrong end of a lot.

  • Look up your own business on Google Maps and Apple Maps on your phone.
  • Tap "Directions" from a few miles away and see where it would leave a driver.
  • If the pin is wrong, fix it in your Google Business Profile and through Apple Business Connect. Getting the pin right on Google Maps walks through it.

If your embedded map shows only an address and not your business name, embed it from your business listing instead, so the label matches what people see on their phone.

The directions a map cannot give

This is the part most sites leave out, and it is often the part customers need most. Write a few lines under the map that answer what a first-time visitor would ask:

  • Landmarks. "We're in the brick building next to the Shell station, across from the library."
  • Which entrance. "Use the side door on Maple Street; the front door is for the upstairs offices."
  • Parking. "Free parking behind the building. Street parking on Main is two hours." If parking is tight, say where the nearest public lot is.
  • Inside the building. "Second floor, Suite 210. The elevator is at the back of the lobby."
  • Accessibility. "Step-free entrance from the rear lot." Or, honestly, "Our entrance has two steps; call ahead and we'll meet you at the door."
  • Common mistakes. "GPS sometimes sends drivers to the old Route 9 entrance, which is closed. Use Hillcrest Road instead."
  • Public transport, if customers use it: the nearest bus stop or train station and how far it is on foot.

Short lines like these make a first visit easier for older customers, people with mobility needs, delivery drivers and anyone arriving in the dark.

Where the map and directions belong

  • The contact page: the full version, with the map, the "Get directions" button, the address as text and the written directions.
  • The footer: your address as text on every page, ideally linked to your map listing. What belongs in your website footer covers the rest of that strip.
  • The home page: for businesses where walk-ins matter, like a bakery, a café or a shop, a short "Find us" section with the address, today's hours and the directions button.

Write the address as real text, not just inside the map. Text can be copied into a GPS, read aloud by a screen reader and read by search engines.

Businesses that do not want visitors

If you run your business from home and customers do not come to you, do not put a map with your home address on the website. Show your service area instead, as in a service area page, and keep your address private on Google too.

If customers come only by appointment, say so next to the map: "Visits by appointment only. Please call before you come."

What to do this week

  • Check your pin on Google Maps and Apple Maps from your phone, and fix it if it is off.
  • Add a "Get directions" button linking to your Google Maps listing.
  • Embed a small map on the contact page if your page has room.
  • Write three to five lines of directions: landmarks, entrance, parking, accessibility.
  • Put your address as text in the footer of every page.

If your current site has an address but no directions, or a map that points to the wrong place, you can see your site rebuilt first with the map and directions laid out, and adjust the wording yourself.

Keep reading