skip navigation

Enhance storytelling with custom map

By Loren Nelson, 05/12/15, 10:45PM CDT

Share

Layers of information and custom icons easily can be added to Google map

Planning for every big project -- whether it’s the construction of new website section, the hosting of a big event or creation of an in-depth article -- should always include one basic, fundamental question.

Do we need a map?

Most often, the answer should be yes. 

We’ve previously looked at how some Sport Ngin websites use maps to show the locations of fields, arenas, gyms and other venues used by leagues and associations. That’s just one of dozens of ways maps can be utilized. 

It’s easy to add layers of text and custom icons to a basic Google map, so we did in an attempt to show how an interactive map can enhance storytelling.

Our hypothetical story is about the four greatest high school boys’ hockey rivalries in Minnesota. We customized the map (see above) with information about each rivalry and team, then added custom logos to show where each school was located. Because the top rivalries are spread across the state -- and involve neighboring schools -- the map provided a great interactive visual enhancement to the (hypothetical) story.


How it works

We checked out several tutorials on how to customize a Google map, and our favorite is this one by add3.com. Many of our steps below are similar to those in that tutorial, customized, of course, for SportsEngine users.


Sign In

Sign in to your Google account, or create one if you don't have one.

Create a New Map

Go to https://www.google.com/maps/d/ and click "Create a new map" (see image below)

Untitled Map

Click on "Untitled map" and then fill in the title and description fields (see images below).

Load Information

Load all of your information in a spreadsheet. We used Sheets in Google Drive for this project (see image below). Note that one of the fields must include either an address or latitude & longitude.

Import Link

Click on the "Import" link, then import your file (CSV, XLSX or KML files are accepted) or click on the "Google Drive" link if you created the file using Sheets, as we did (see images below).  

Importing Data

As you import your data, you will be asked to select which column will be used to indicate the position of your map placeholders. Choose the one that lists the address (see first image below).

After you click "Continue" you will be asked to select the column that provides the name for each placeholder on the map. The little question mark in the grey/blue box gives a sample of the information in that column. Click finish to load the information. (see images below).

Top Header

Click on the top header to edit the name and/or description of your map. Click on the name of the data file you imported to change the name of your layer (see image below).

Styles Link

Click on the Individual Styles link to get options for how you want to group and label your locations. In this example, we left the options at their default settings (see images below).

Open Data Table

Click on the three grey dots stacked horizontal at any time if you want to change any of the data you imported by selecting the "Open data table" option (see image below).

Customize Your Markers

You can customize the markers on the map by using the options provided by Google or by bringing in custom images you have created. To get started, hover over a row, then click on the icon at the end of the row (see images below).

More Icons

You can choose from a basic palette of icon shapes and colors, or click "More icons" for a huge selection of categorized choices (see image below).

Other Icons

To bring in a custom marker, go to the bottom of the "More icons" page, paste the URL of the location of your icon (jpg, png, bmp and gif are accepted) and then click the Add icon button (see image below).

Note: Once you have loaded your custom icon, it will appear in the list of "Other icons" (see upper left image above.)  

Embed Your Map

Embed your map by clicking the three gray dots, then selecting the "Embed on my site" option in the dropdown (see image below).

Copy the embed code (see image below).

Choose Location on Your Site

Choose the location on your site where you want to embed the map, then, using the Code element in Sitebuilder's Page Elements menu, paste the embed code (see image below). 

THE FINISHED PRODUCT

Information on each school and rivalry can be accessed simply by clicking on the icons in the customized map below (map also at the top of this page).

Loren Nelson Headshot

About Loren Nelson

Loren Nelson is Community Manager at SportsEngine. He is also the National Media Editor and has served in a variety of other customer facing and media roles since 2009.

Loren's Social Media Contacts