Service Area Map: Setup and Management Guide

Everything you need to create, embed, and maintain your service area map

Quick Overview

The full setup only takes a few steps. This is the short version from zip code list to an embedded map on your site.

Generate and download your KML file.

Upload it to Google My Maps.

Embed the map on your site.

Tip

If you know the cities or counties, you can ask AI to generate the corresponding zip codes for you.

How It Works

Your service area map is powered by Google My Maps, a free tool from Google that lets you create custom maps. You will create a map, import your zip code boundaries into it, and then embed it on your website.

Once the map is embedded, any changes you make in Google My Maps will appear on your website automatically. You do not need to touch your website or update any code. Just edit the map and the changes go live.

This guide walks you through the entire process from scratch. You will need a Google account (any Gmail or Google Workspace account will work).

Step 1: Generate Your Boundary File

First, you need to turn your list of zip codes into a KML file. A KML file contains the actual geographic boundary shapes for each zip code, which is what creates the shaded regions on your map.

  1. Open the Zip Code to KML Generator.

  2. Paste your zip codes into the text box. You can separate them with commas, spaces, or put each one on its own line.

  3. Optionally, choose a fill color and give your area a name (e.g. "Atlanta Metro Service Area").

  4. Click Generate KML. The tool will fetch boundary data from the US Census Bureau. This may take a moment depending on how many zip codes you have.

  5. When it finishes, click Download KML File and save the file to your computer.

Tip

Save the KML generator page somewhere convenient. You will use it again whenever you need to add new zip codes to your service area.

Step 2: Create Your Google My Map

  1. Go to mymaps.google.com and sign in with your Google account. If you do not have a Google account, you will need to create one first at accounts.google.com/signup.

  2. Click the + Create a new map button. A blank map will open.

  3. Click Untitled map at the top left and give your map a name (e.g. "Service Area Map"). You can also add a description if you like.

Step 3: Import Your Boundaries

  1. In your new map, you will see a layer called "Untitled layer" in the left panel. Click Import underneath it.

  2. Drag and drop the KML file you downloaded in Step 1, or click Select a file from your device and browse to it.

  3. Google My Maps will process the file and display your zip code boundaries as shaded regions on the map. This may take a few seconds.

  4. Click the layer name ("Untitled layer" or the KML filename) and rename it to something descriptive like "Service Area".

Note

If your boundaries do not appear right away, try zooming out or using the search bar to navigate to the area your zip codes cover.

Step 4: Share Your Map for Embedding

For the map to display on your website, it needs to be publicly viewable. This does not give anyone editing access. It only allows people to see the map.

  1. Click the Share button in the left panel (it looks like a person with a plus sign).

  2. Under General access, change the setting from "Restricted" to Anyone with the link.

  3. Make sure the permission is set to Viewer (not Editor). This is the default.

  4. Click Done.

Important

If you skip this step or change the sharing back to "Restricted" later, the map on your website will appear blank to visitors.

Step 5: Get the Embed Code

  1. Click the three vertical dots menu next to your map title in the left panel.

  2. Select Embed on my site.

  3. A box will appear with an HTML code snippet that starts with <iframe. Copy this entire snippet.

  4. Send the embed code to your web team so they can add it to your website. If you manage your own site, paste it into an HTML block or widget on the page where you want the map to appear.

That's it

Your map is now live on your website. From this point forward, any changes you make to the map in Google My Maps will automatically update on your site. The sections below cover how to make those changes.

Updating Your Service Area

When you expand into new zip codes, you have two options.

Option A: Add new zip codes to the existing map

Use this when you are adding a few zip codes and want to keep everything you already have.

  1. Open the Zip Code to KML Generator and enter only the new zip codes.

  2. Generate and download the KML file.

  3. Go to mymaps.google.com, open your map, and click Add layer in the left panel.

  4. Click Import on the new layer and upload the KML file. The new boundaries will appear alongside your existing ones.

Option B: Replace the entire service area

Use this when your zip code list has changed significantly and you want a clean start.

  1. Open the Zip Code to KML Generator and enter your complete, updated list of zip codes.

  2. Generate and download the KML file.

  3. Go to mymaps.google.com and open your map.

  4. Delete the old layer by clicking the three dots next to the layer name and selecting Delete this layer.

  5. Click Add layer, then Import, and upload the new KML file.

Removing Zip Codes

To remove individual zip codes from your map:

  1. Open your map at mymaps.google.com.

  2. Click on the shaded region you want to remove. A small info window will pop up showing the zip code.

  3. Click the trash can icon in the info window to delete that boundary.

Removing many at once

If you need to remove a lot of zip codes, it is faster to regenerate the KML file with your updated list and replace the entire layer (see Option B above).

Changing Colors and Styles

  1. Open your map at mymaps.google.com.

  2. To change the color of all regions at once, click the paint bucket icon next to the layer name in the left panel.

  3. To change a single region, click on it directly, then click the paint bucket icon in the info window that appears.

  4. Choose a color from the palette, or click More to enter a custom hex color code (e.g. #3b82f6).

Adding Office Locations or Markers

You can add pin markers to highlight your office, warehouse, or other key locations.

  1. Open your map at mymaps.google.com.

  2. Click the marker icon (looks like a pin) in the toolbar below the search bar.

  3. Click on the map where you want to place the marker.

  4. Give it a name (e.g. "Main Office") and optionally add a description, photo, or custom icon.

You can also type an address into the search bar at the top of the map, then click Add to map to pin that location.

Important Notes