Make a Google map with layers you can turn on and off
A map that shows locations over time benefit from the user being able to pick which units of time they see on the map. Here’s how you can make that happen.
The map above shows addresses of properties that applied for a demolition or teardown permit, for a story taking a look at how neighborhoods have changed over the years. I wanted people to be able to see all the pinpoints at once, but to also choose which specific year they may want to see.
The reporter got a list of addresses for every year from 2010 to so far this year. I copied and pasted them into spreadsheets. Because I wanted to be able filter the map by year, however, I had to put each year’s worth of addresses into its own spreadsheet. So I wound up with seven spreadsheets.
Then I went to Google Maps (log in if you aren’t already). Click on the lines on the left (Menu) and choose Your Places.
Click on Maps to see all of your existing maps and to build a new map.
At the bottom of the list of existing maps, click on Create Map.
You’ll land on a page showing the United States. You’ll need to fill out information on the left side of the page, here:
Click on “Untitled map” to give the map a title and a description. Both are public-facing fields.
Where it says “Untitled layer,” click on the Import button. Each of your spreadsheets will be considered a layer. If the spreadsheet is in Google Drive, click on that tab in the popup, otherwise, search your desktop for the Excel file.
Google Maps will ask you two things: which field in the spreadsheet is the one that indicates the points on the map, and then which field is the one you want to use as the headline of the info box the reader gets when they click on the pinpoint?
Click on “Add layer” over and over until you’ve added all of the spreadsheets.
After you add each new layer, you’ll probably want to make that year’s pinpoints its own color. To change the color for a year, hover over the item that says “All items.” A paintcan icon appears. Click on that. In the popup, you can choose a new color and you can even change the icon to something else in the list.
Now each year’s worth of information is on the map. Users can uncheck all but one year to see only that year’s worth of pins. I would suggest you instruct them on how to do that both in the description of the map and in the story, right before you drop in the embed code.
To embed the map in your story, first you must Share the map so it is public.
Click the Share button in the left rail. In the popup, choose “Public on the web.” Save and done.
Click on the three vertical dots to the right of the Google Map title to reveal some more options. This is where you find the embed code, by clicking on “Embed on my site.” A popup box shows you the code. Copy it and paste it into your article.
Be mindful of the width of the map. You may have to change the dimensions in the embed code in order to fit on your article page.