How to show booking locations on a map

First decide whether customers choose from fixed venues or enter an address for each booking. Fixed venues are easier: you can show a separate map for each location or display the selected venue after booking.

If the address changes for every booking, a simple embedded map is not enough. You need address storage, geocoding and a way to pass the selected address into the map.

Write each address in a consistent format, including street, city, region and postcode. Avoid relying only on a venue name, because similarly named places can be geocoded incorrectly.

For each location, also record the public-facing name, phone number, access notes and a directions link. Check every pin manually before publishing it.

For a single fixed location, open that place in Google Maps, choose the sharing or embedding option, and copy the provided iframe into a WordPress Custom HTML block. Place it near the booking form, contact details or confirmation instructions.

This route is usually fine for one venue. It does not automatically change when a customer selects a different booking location, and it does not geocode addresses entered in the booking form.

If you use Bookly, add the service locations in Bookly > Settings > Locations. The Locations add-on makes the Location field available in the booking form and lets customers choose a preferred location. You can then assign staff to locations and configure location-specific services, prices and working hours.

Include the location in appointment records and notifications so the customer and staff member receive the same address. Bookly documents the {location_name} and {location_info} notification codes for this purpose.

For an interactive map that converts addresses into coordinates, create a Google Maps API key and enable the APIs required by your integration. A browser map normally needs the Maps JavaScript API; address conversion may also require the Geocoding API, and address autocomplete may require Places services.

Google requires a valid API key and billing for Maps JavaScript API requests. Restrict the key to your website and only the APIs you use. A key restricted for browser referrers can fail when a plugin performs geocoding on the server, so check whether your booking system makes frontend or backend requests before choosing the restriction type.

Make test bookings for each service, staff member and location. Confirm that the map shows the right pin, the confirmation email contains the right address, and the directions action opens the expected destination.

Test on a phone as well as a desktop. The common failure is a map that works in the administrator area but is blank for customers because the API key, billing account or allowed website referrer is wrong. Also check that another plugin or theme is not loading the Google Maps script a second time.

If you need selectable booking locations and an interactive map without building the address workflow yourself, use the Bookly Google Maps Address Add-on with Bookly's location features. It is designed for service businesses that need address entry, geocoding, multiple locations and directions within the booking process.

Install the add-on through Plugins > Add New > Upload Plugin, activate it, add your Google Maps credentials where requested, then configure and test each Bookly location. Keep the manual embed route if you only have one permanent venue; the add-on is most useful when the map must follow the booking selection.