Google Maps: How to make a map from a spreadsheet and embed it on a web page

Mid-June in 2020, Netsquared organized a virtual event called “The Top Digital Tools for Nonprofits”. Elijah van der Giessen, Netsquared’s Community Manager invited meetup organizers of TechSoup’s Local program to give 5-minute presentations about technology tools they discovered and found worthwhile. There were 12 speakers in total.

It was fast paced events and I learn a about new tools and use cases for them, like Audiense – a tool to “Identify relevant audiences, discover amazing actionable insights and inform your strategies to grow your business.” or Descript – a tool to edit audio recording by editing the text of the transcript. We knew already about GiveWP a WordPress plugin for donation management. Matt Cromwell not only gave us a tour of the tool but also showed-off upcoming new features. Well worth checking out. A full list is available on Eli’s blog post.

• All the resources from the event are available on the Netsquared Blog.
• Find the playlist of all presentations on the YouTube Channel.

Google Maps: How to make a map from a spreadsheet.

In this video, I show how to use a data from a spreadsheet, and import location data and other information about the locations into a Google Map. I also show how to change the color of the pin, and how to change the icon. Once the map information was finished, I had to make the map publicly available and copy the embed code for the website. The last bit didn’t work on the first trial. I was rushing and coming up on the last 10 seconds.

The recording is now available on YouTube. The resources and transcript are posted below.

Tools used in the presentation

• Google Maps
• Google Sheets
• WordPress

All tools used in the presentation are available free of charge. For WordPress, you either need a hosting service or start a new site on WordPress.com. You need a free account to access the Google services.

Source of Information

We used the data published on the Harry Chapin Food Pantries Locator for Collier County.

Google Sheet: List of Distribution Centers

Publicly available here

Final Map View

Add places to your map

You can add important places by searching for locations or drawing them directly on the map. Here are the instructions from Google

Transcript

Sponsored by Pauli Systems

Since 2013, I’ve been a Tech4Good co-organizer in Naples, Florida. I’m also the owner and web developer at Pauli Systems, and we work with nonprofits. So today I’ll show you how to create your Google Map using data from a Google Sheet and embedded into your website. So, nonprofits can use this method to visualize geographical data. Foundations might create a map of organizations they support in the nation or food banks might need a map for the distribution centers. I’m sharing my screen now to show you that example.

I have here a list of the Harry Chapin Food Bank is the local food bank distribution. They have a list of all the food bank distribution centers with their opening hours. But I feel this could also be helpful if you have it all.

So here, each distribution that has their own map and location. But if I’m new into an area or I need to know where are the centers near me, I would love to have it in a map

So, what I did was I added all that information from that website into a spreadsheet and then cleaned up the organization name with title case. Then, so I have the organization, the address, the phone number, and the opening hours. Then I can go to my maps and create a map.

So, I’m going to paste in the title because you don’t want to see me type, especially when I only have five minutes time. So, that’s the Harry Chapin Food Pantries. I also changed the title of this one, that’s “Organizations” and be that. So, then I import, click on “Import” then I go to Google drive and I do the “Recent” one. Takes a little to load. I wasn’t able to speed that up.

Okay, so I take that. Now I get two questions. The first one is what are all the columns in my spreadsheet that will help Google put the pin in to the right ad? That was the address. I have found with other things you could also do just city and state. But also would work. The second question when I continue is what is the title when you want to display all that information? I said, that’s just the organization. So, I finish it and whoa. Tada. I get my pins in there. All at once. I click on them. I have that information in there, but I have the… When you see the organization is twice in there. So go to my little edit here and I just uncheck the column that has the redundant information.

From there I can also… So, we could preview it. So, that’s how it will go when people see it. Then I click on it and Tada, on the left-hand side, it comes to the slides and the information of that particular pin organization with the address as well, the phone number, and the opening hours.

Okay, so what I don’t like is the color of the pin. The blue, that’s just kind of random picked. I’d like to make that orange, so I can do it this here. And then there is… I can select an icon instead of that pin thing. So, I go to more icons and well, I think you can spend alone two hours in there. I just punched in food for the search and I grabbed all the groceries icon and then I clicked on okay. Then my map looks like this. So, I have that, the next step to make it available for embedding on the website is I need to share it and click here and say okay. Anybody who has to link can look at it, that’s done. Then up here I can do embed on my site. I grab the embed code, go over to my website, add a new post, and that’s the slowest part.

So, it’s “Food Distribution Centers”. Then I grab the custom HTML code. Put my, oops, not that one. Grab this one and put this in, publish and voilà.

Eli: I think you’re missing the first line of that iframe text. You’re just missed a little of that.

Birgit: Oh man, too fast. That was too fast. So, resolve. Thank you for watching over me, Eli as always. Okay, so go away.

Eli: 10 second left.

Birgit: Remove the bottom, try to get custom. I have 10 seconds, I can do this. Look at that, yay. And here is my map.

Eli: Magic, in record time. So yes, this map has actually happened super fast. Thank you, Birgit, that’s amazing.

Sponsored by Pauli Systems