Using Google Maps APIv3 and Google Spreadsheets – Part I

This post focuses on the resources you will need to get started. We’re not digging in deep on database creation and location mapping just yet. We’re putting all the pieces into place for a successful implementation. It’s worth mentioning again that this tutorial is not for the code-fanatics or industry-experts. It’s meant for the novice hacker that plays with code until it works. I’m by no means a developer…just a tech nerd :). 

First off, to host a website, you’ll obviously need a web host and a domain name. I’m not covering what those are. Once you secure those, the next step is to grab API v3. access for Google Maps via your @gmail.com account. To do that, head over to https://code.google.com/apis/console/ while logged into your email account. If this is your first time, you’ll need to create a new project (don’t worry…it’s free!). Give it an easily identifiable name. Once in the project console, click on SERVICES, then scroll down to find Google Maps API v3 and toggle it ON.

Get Google Maps API v3

Once the API is on, you’ll be able to grab the API key by clicking on API ACCESS in the left-hand menu. Make note of this location as you’ll need to copy this API in your webpage later in this tutorial. No need to copy anything down.

Your Google Maps API Key

Finding Google Forms

We’ll be using a Google Form to populate a Google Spreadsheet. No need to create a form a this point. Just make sure you have the FORM option in your Google Drive. The option is ON by default.

Enable Google Forms

Creating your base .html file

To embed a map, we need to have a file in which to embed it in. If you have the luxury of working in Dreamweaver or other HTML editors, you already know what to do. If not, you can use Notepad to create your .html file. Just save it as map.txt, then rename it to map.html. In your .html file, copy/paste the following code. I’ll try explaining what everything does inline. We have much more coding to do, but this is your starter file.

Save your website (remember, save it as map.html). We’ll come back to this later on.

That’s it for now! We’ve set up our webpage, set up an API account and confirmed we have Forms available in our Google Drive.

Leave a Reply

Next ArticleUsing Google Maps APIv3 and Google Spreadsheets – Part II