Using Google Maps APIv3 and Google Spreadsheets

Over the past few days, I’ve had the opportunity to learn some cool things that one can do with the Google Maps API v3. While working on a newly acquired project, I was faced with a unique (or maybe not so unique) situation demanding the need for a solution that allows users to submit location data, which is then automatically plotted on an embedded Google Map. This situation was unique in the sense that it needed to be purely based on Google features (for simplicity and user friendliness).

The posts to follow (Part I through Part V) focus on providing this solution through resources available on the Internet. It took me three days of research, debugging and hair pulling to get the system to work as intended. I thought I’d save you the trouble. Here is the unique situation:

  1. User submits a Google Form with address information, which is then stored to a Google Spreadsheet.
  2. Address information is then geocoded in the Google Spreadsheet automatically upon form submission to provide LatLng pairs for plotting. Note that Google Maps can plot markers based on address alone, however, the process is much slower when compared to simply providing LatLng pairs.
  3. An embedded Google Map then pulls information from the Google Spreadsheet, processes the rows and columns, then plots the markers and provides information in the infowindows.
  4. Markers on the map have to be different depending on the type of location (ex. if it’s a church, display a church marker, if it’s a hospital, a hospital marker and so on).
  5. Lastly, the embedded map has to have links that make the map pan to certain areas (different counties, different states etc).

I’ll be going through this process in a 5 part explanation, covering the following topics as we go along. This should hopefully be a comprehensive tutorial that gets you from nothing to a fully functioning map. Note that this post will not be updated for future versions of the Google Maps API. As of July 27, 2012, Version 3 (referenced in this tutorial) became the official Javascript API version. The 5 posts will focus on the following (the list will be linked once posts are written and published):

  1. Preparation: what you’ll need to get started.
  2. Focusing on the data: data collection, spreadsheet & form customization.
  3. Focusing on the map: embedding a Google Map & connecting to your Google Spreadsheet.
  4. Focusing on the design: making your map look nice & implementing links that pan the map.
  5. Recap & resources: bringing it all together & a list of resources and sources used in this tutorial.

Leave a Reply

2 Comments

  1. Hi Bogdan. I followed your instructions I-II and they were just great. However it seems III-V are not (yet) available or at least I wasn’t able to find them. Are you planning to publish them soon? Wish I could continue tomorrow already. Many thanks in advance.

    • bogdanrau

      Hi John,

      I’ve not published them yet and I’m not sure I will. The issue is that I kept getting javascript errors when connecting the map to the excel spreadsheet. I thought I could get that fixed when I started writing these, but sadly I couldn’t. I’ll look through my docs and can post up the code i used. Hopefully that will be helpful. Happy to answer any questions you might have.

      Bogdan

Next ArticleUsing Google Maps APIv3 and Google Spreadsheets - Part I