Welcome   /      /    Subscribe  

Create a code-free Google map in 3 easy steps

You can make this map without knowing any code. Really. Here’s how:

1. CREATE A SPREADSHEET.
Go to Google Docs and create a new spreadsheet, or import an existing spreadsheet. You can have a lot or just a little information in the spreadsheet, but you will must have at least three columns: A title for the map points, a description and an address. A column to rank the information is optional.

If you have several cells of information that you want displayed in the map, concatenate them. For example, if you want to combine cells C2 and D2 (with a comma separating them), enter this formula in a new column: =concatenate(C2, ", ", D2) Your concatenated cells can include HTML tags, such as bold, italic or line breaks.

Publish the spreadsheet. (If your spreadsheet includes private information, do not publish it.) After hitting “Publish now,” mark the “automatically republish” box, select “More publishing options,” change the file format to ATOM, select Sheet 1 and copy the URL.

Example: Brewery spreadsheet

2. GEOCODE THE ADDRESSES.
To plot points on a map, you need latitude-longitude coordinates. (If you already have those coordinates, you can skip this step.) You don’t have to look up each one individually: the geocode wizard will find them all at once.

The URL you copied from your spreadsheet will include a key and worksheet ID. Enter them as directed and the geocode wizard will return the latitude and longitude for each address. It will warn you if an address cannot be found. Create two columns in your spreadsheet, and paste the latitude and longitude. (You should be able to copy and paste both columns at once.)

Example: Brewery spreadsheet with lat/lng coordinates

3. MAKE A MAP!
Copy your key and worksheet ID into the map wizard. Identify the fields and adjust the size of your map (you can change it later) and the color for the markers. If you use a rank, those numbers will show up on the map points; otherwise, they’ll be blank. Preview your map and make any changes you want.

Below the map is the JSON code. If you do not already have one, sign up for an API key — that’s what lets you embed the map on your Web site. Copy the code and add your API key.

You can make changes to the spreadsheet, and the map will automatically update. There are several notes in the code (comments are marked by // and /*) if you want to take a peek, figure out how it works and make changes. But save a copy of the original file … just in case.

4 comments and counting

  1. Pingback - STL Social Media Guy » Blog Archive » links for 2008-07-10   /   July 10, 2008    #

    [...] Create a code-free Google map in 3 easy steps - graphic designr Man, I love these tips. Thanks, Erica. (tags: programming multimedia) [...]

  2. Erica Smith   /   July 15, 2008    #

    The Sun-Times used this tutorial to create a map of the soon-to-close Starbucks locations.

  3. Pingback - A Google maps tutorial worth trying | Editor, revised   /   August 1, 2008    #

    [...] I posted about that site, Erica chimed in and steered me toward a tutorial she wrote about creating Google maps from a database without having to know code. I finally took [...]

  4. Pingback - Bookmarks about Geocode   /   November 3, 2008    #

    [...] - bookmarked by 1 members originally found by babaly on 2008-10-16 Create a code-free Google map in 3 easy steps http://graphicdesignr.net/blog/2008/07/09/create-a-code-free-google-map-in-3-easy-steps/ - [...]

Comments are closed.