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.
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.
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.
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <!-- this tells your browser that HTML coding starts here -->
<head> <!-- the BRAIN section of the webpage. Tells the browser HOW to display information and what resources it will need. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- specifies character encoding -->
<title>YOUR WEBSITE TITLE HERE</title>
<body> <!-- the BODY does what the BRAIN tells it to do -->
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.