GREAT IDEAS

Make a Google map with layers you can turn on and off

Posted

Reprinted from GateHouse Newsroom

A map that shows locations over time allows the user 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.

This is the information each spreadsheet contained – Address, date the permit was issued and what kind of item was replacing the old property:

Google Map spreadsheet by layer

Spreadsheet address information

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.

Google Maps menu button

Click on Maps to see all of your existing maps and to build a new map.

Google Maps Your places

At the bottom of the list of existing maps, click on Create Map.

Google Maps 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:

Google Maps info panel

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?

For my map, for both I chose Address.

Google maps placemarks

Click on "Add layer" over and over until you've added all of the spreadsheets.

Google Maps add layer

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.

Google Maps paintcan

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.

Google Maps color icon

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.

Google Map public shareGoogle Map embed code

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.

Nicole Simmons has been the regional digital editor for GateHouse Media New England since 2012. Before that and since 2007, she was the metro editor for new media for MetroWest Daily News in Framingham, Mass. She started at Community Newspaper Company (later bought by GateHouse) in 1999 as an education reporter, moving on to a city beat reporter, a copy desk editor, a page one designer/editor and a Sunday paper editor. She has helped newsrooms throughout the country learn and use the MediaWare Center and worked with the former Framingham Design House to bridge the gap between designers and editors. Now she's focused on all things digital and will share with you all of the fun nuggets of information she comes across.

GateHouse, Google maps, Simmons
include('widgets/greatideas_rail.tpl.php');
Calendar View all