In short
Draw the service boundary first, then label every area with the same rule you use when you accept a booking.
Pair the map with a neighborhood or ZIP list because a shaded shape alone is hard to interpret on a phone.
Put travel charges and edge cases beside the map, not in a separate policy page.
Test the public link at phone width before you send it to customers.
NOS Team made a fictional service area page for Wheelhouse Mobile Repair, a made-up bicycle repair business. The finished page separates two no-charge neighborhoods from two areas with an extra travel charge. It also says that addresses north of Ridge Road and east of the river are outside the boundary.
The first map used vector shapes. Those shapes appeared as an empty panel in the page preview, although the labels below still worked. We rebuilt the map with plain colored HTML blocks, opened the public link again, and could see all four labeled areas. That failure changed the advice in this template: a simple map that survives the final page is better than a detailed map that disappears.
Start with the rule, not the artwork
A useful service area map answers a booking question. Decide what happens for each location before choosing colors or drawing borders.
- Core area: the business accepts the address with no travel charge.
- Outer area: the business accepts the address and shows the extra charge.
- Outside area: the page says the address is not covered.
- Boundary address: the customer is told how to ask before booking.
We put those four outcomes into the fictional example. The map, the neighborhood cards, and the boundary note all use the same wording.
How do you make a service area map for a website?
- List every covered place. Use the names customers recognize, such as neighborhoods, towns, or ZIP codes.
- Choose one visible boundary. A road, river, county line, or named district is clearer than “about ten miles away.”
- Separate coverage levels. Use a small legend for the core area, outer area, and any travel charge.
- Repeat the rule as text. A person should still understand the boundary if the map is small or does not load.
- Add an exception note. Say what happens on a boundary street or in a ZIP code that crosses the line.
- Open the public version. Check the map and the text on the same narrow screen a customer will use.
Tip from this build: do not let a ZIP code become the final rule when only part of that ZIP is covered. In the example, ZIP 10021 is covered only south of Ridge Road, and ZIP 10024 is covered only on the west bank.
What should a service area map include?
Keep the first screen focused on the decision. The fictional page uses a short headline, a two-color legend, the map, and a plain-language list. A customer does not need the history of the business before learning whether the address is eligible.
The map needs labels inside the shapes. The text list needs the same place names underneath. Then add the facts that a color cannot carry by itself: travel charge, road-side restriction, river-side restriction, and what to do with an address on the line.
Google Business Profile describes a service area as the place where a business provides products and services. Its own service-area settings belong in the profile. A page like this can give customers the extra boundary and fee detail that does not fit comfortably in a short profile description. See Google Business Profile Help.
Can a service area map show travel charges?
Yes. Put the charge rule in the legend and repeat it beside each affected place. Do not make a customer infer a fee from color alone. In the fictional example, Old Mill and west-bank Riverview each say “Extra travel charge,” while Northbank and Cedar Park say “No travel charge.” These names, ZIP codes, and charge rules are invented for the example.
How do you handle streets on the boundary?
Write the exception next to the map. “Northbank” is not enough if the business stops at Ridge Road. Say which side is covered. If a river, highway, or county line creates the edge, name it in both the picture and the text.
For an address that still cannot be classified, give one narrow next step. The example has an “Ask about a boundary address” link. It does not present a booking form or promise an appointment. The page only helps a visitor decide whether the address is clearly inside, clearly outside, or needs a question.
What did the public phone page show?
The final public page showed the fictional label, both coverage colors, all four neighborhood names, the ZIP guide, and the road boundary on one phone-width screen. Farther down, it showed the neighborhood checker and the full boundary exception. The public page and the editing page belonged to the same NOS document.
Finished result: the fictional business now has one public page where a visitor can compare a neighborhood, ZIP guide, boundary landmark, and travel charge before asking about service.
When not to do this
Do not use a static service area page as a live dispatch system. It does not know crew availability, traffic, appointment capacity, or whether a particular address is safe to reach. If coverage changes by the hour or depends on live routing, use a booking or dispatch system that checks the actual address. Keep this page for stable boundaries and plainly stated exceptions.
Make and share the page in NOS
NOS can hold the complete HTML page, show it in View, and create a Share link. In the captured Share panel, anyone with the link could read the page without signing in and could not edit it. After the first map failed to appear, we replaced the page content in Code view and checked the same public link again.
Download the complete fictional example
For the broader small-business page around this map, read one page website for small business. If you want an address to open in a map app, use an HTML link to a map location. A business that also publishes prices can use the structure in price list link.