Embedding a map of service locations with multiple city outlines using Google My Maps

Here’s a task that I thought would be completely straightforward, but took me down a long rabbit hole of failed attempts: adding the 47 towns and cities Greater Boston Legal Services serves onto a custom Google Map that displays the border outlines of each city. The final method was simple, but it took a lot of research to figure it out. The hard part was getting a geography (KML) file of the right file size and with just the towns I needed to load onto Google Maps. I ended up turning this static list:

Into a service area map that looks like this:

© OpenStreetMap contributors

with a 3 step process of downloading the city outlines, converting to a format usable in Google My Maps, and then uploading to Google My Maps.

The new map lists all of the towns, includes our two locations in Boston and Cambridge, and lets you click to get directions. It shows the outlines and boundaries of all of the cities and towns we serve for a quick visual that helps you learn if GBLS can help you. I did not need to draw any borders manually to get it, either.

Failed attempts

Before I found the method below, I wasn’t really sure where to start on this project. I knew I wanted to use Google Maps as I have seen it embedded in websites before and it’s a product most of our users would be familiar with. I quickly found the Google Maps “My Maps” tool and determined that it could import a set of city coordinates in a format named KML that was created for Google Earth. I took a look at town boundary files available on the the US Census Bureau site. These were in KML format, but there were odd gaps in the city boundaries included in the files I located. I took a look at Massachusetts’s very comprehensive set of GIS data. Getting the data out was easy, but the resulting KML boundary file was too large to import on Google Maps (15 MB is the limit). I found some other MA KML files that were too large as well. Someone recommended using Tableau, but it’s a pretty complex piece of software and I wasn’t sure how to start learning it or how successful it would be for what I wanted to do.

Finally I found a website that let me export just the town boundaries I needed. This was a tough research project so I wanted to share my work for others to benefit from.

Getting the city and town boundaries

The key find was a quality source of data. I used an OpenStreetMap Boundaries tool to get just the outlines of the cities and towns I wanted. Interestingly, I happen to know that most of the Open Street Maps’ dataset for Massachusetts comes from our state’s excellent open dataset of GIS data, something not many other states have shared. However, OpenStreetMaps made the information much more accessible and useful. This has a browseable list of various jurisdictions. I scrolled down to United States of America, then Massachusetts, and in some cases I had to open up a secondary county-level list of towns. Once I opened it, I could use the browser’s search option to quickly select the towns I needed.

Once I had all of the cities and towns I needed highlighted, I used the Export function to save it to an ESRI Shape file (.shp). This is a format for sharing information between different Geographic Information Systems, perfect for what I needed.

Json is the default export format, so I selected shp. I also changed water to land (I didn’t want to show water boundaries) and I unchecked the API option before clicking Export. This prompted me to save a .zip file with several files inside. I only needed the .shp file, so I extracted that from the .zip file.

Converting the ESRI .shp file to Google Maps KML format

Google Maps doesn’t understand the ESRI .shp file format, so I converted the .shp shape file to Google’s native KML format using the free QGIS tool. This is a tool you must download and install.

After installing QGIS, I opened a new project and added a new vector layer by selecting the .shp file.

Next, I saved the layer in KML format by highlighting the layer and choosing “Save As” from the right-click menu.

 I also selected the “NAME” field to export so the town names would be available to display in Google Maps. I created two separate layers for our project, because we have a slightly expanded service area for elders.

Creating the Embedded Google Map

Creating an embeddable map is as simple as visiting the Google My Maps site and clicking “create map”.

You can search and add points of interest, or draw polygons. I added points for our two locations.

Next, I added a new layer:

Then I imported the KML file I created earlier to the layer.

I renamed the layer to something more descriptive:

Layer names will be visible in the final Google Map. Visitors to your website can also view the individual city outlines and view their names.

Some options you can configure include changing the outline color or fill of the different cities to a style of your choice. Unfortunately, Google gives you limited ability to control the display of different layers once they are imported to Google Maps. You can select “individual styles” (which makes all items on the layer possible to color separately) or “uniform styles”. It is also possible to style by data columns. QGIS could be used to help with the colorization by assigning different column values to cities you want to be colorized differently, but that’s not an option I tried.

The next step was to set the viewing options of the map to “public” by clicking the “share” button. And finally, obtaining the embed code by clicking on the menu ellipsis and then selecting “embed on my site”.

This gives you an iFrame that can be copied and pasted into the HTML editor on your website. I added it to a Paragraph on our new Drupal 8 website. First I had to turn off the formatted text display so I could view the underlying HTML code. That looks like this:

The process was the same for this WordPress blog post, although WordPress labels the button “text” instead of “source”. And that’s it!

Responsive Google Map Embed Code

The new map looks nice on mobile, but to make sure the width isn’t too big for a phone-sized screen, Embed Responsively can help you get a mobile-responsive map view. I just copied and pasted my iFrame code from Google My Maps into the Google Maps tab, and used the altered code that includes style information.

Conclusion

I hope this information is helpful for someone else who wants to embed a simple map of city boundaries on their public website. If you have data you want to display by city, it would be easy to expand this to different kinds of visualizations. Using QGIS you could add numeric values to the cities and colorize them with Google Maps styles.