Google My Maps: Embed Maps In Your Website

Data Table in Google My MapsIn July 2015, Google announced that Google My Maps had been integrated with Google Drive. This provided G Suite customers with the ability to easily create data driven maps.

A table of data from any Google Sheet can be imported into a layer within a Google My Map. Once data has been imported into a layer, the data table behind that layer can be manually edited. If new layers are created, new data sources can be imported into the same My Map.

One of the many possible uses of Google My Maps is to embed a map of customer locations in your website. Here’s an example. Click on the “View larger map” button in the top right to view the map in a separate browser tab.

Steps For Creating and Embedding a Google My Map of Customer Locations

Step 1 – Export a list of customers from your CRM or ERP system, city and state/province only, to a CSV file.

Step 2 – Upload the CSV file to Google Drive

Step 3 – Save the CSV file as a Google Sheet

Step 4 – In Google Drive, click the New button. Then, click More > Google My Maps

Step 5 – In the My Map, click on the import link. Select and import the Google Sheet you just created.

Step 6 – Check the checkboxes for the two fields in the spreadsheet

Step 7 – Select the State/Province field as your marker and click finish. You now have a basic customer map.

Step 8 – Title the map and then change the sharing to “Publish on the web”

Step 9 – Click on the ellipsis menu (three dots) and select “Embed on my site” and copy the embed code

Step 10 – Paste the code into your website

The hack for updating a My Map from an updated Google Sheets source is to create a new layer and then delete the existing layer (which had been imported from an earlier version of the same Google Sheet).

Here’s a video that explains the process:

Creating Other Types of Google My Maps

Here’s an example of a map with more data fields and more records that we created after the original 2015 release of My Maps for G Suite. We downloaded a spreadsheet (XLS format) of Napa Valley Wineries from the Napa Wine Project.

Once the data was in, we played around with several features which included “styling” the pin colors by city. We also added the city/town name to the map, although this makes the map very crowded until you zoom in.

Google My Maps also offers the ability to create multiple layers such that data sets can be toggled on and off by anyone viewing the map.

Napa Valley Wineries Google My Map

We both published the map to the web and used the embed code to display the map below.

Note that there are controls in the top right of the embedded map for viewing information, social sharing and full browser tab view. You can click on a pin to see details from the map’s data table.

Sonoma Valley Wineries Google My Map

In this map, the wineries were manually added rather than imported. This means that a link to standard Google Maps is visible for each winery. If you click on a wine glass, information from Google Maps will slide out from the left.

Leave a Reply

Your email address will not be published. Required fields are marked *