Create a code-free Google map with tabs in 3 steps

Source: Looking for Lincoln

Back in July I posted a tutorial on how to create a Google map from a spreadsheet without messing with code. You can now create a map with tabbed map windows — still without messing with code. Click on the markers in this map of places President Abraham Lincoln lived and traveled in Illinois to see the tabbed windows. Here’s how to make your own.

1. CREATE A SPREADSHEET
Go to Google Docs and create a new spreadsheet, or import an existing spreadsheet. The spreadsheet must have at least four columns: Title, address, information for the first tab and information for the second tab. The names on those last two columns are important: They should be one word and will appear on the map. A column to rank the information is optional.

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

Publish the spreadsheet. (If your spreadsheet includes private information, do not publish it. Either delete the private information, or find another way to create a map.)
• In the top right corner of the spreadsheet, click the “Share” button, then “Publish as web page.”
• Click “Publish now”
• Check the “automatically republish” box, and select “more publishing options”
• A new window will open. Change the file format to ATOM, select the sheet you are working on (most likely Sheet 1) and click the “Generate URL” button.
• Copy the URL and close the published formats window.

Example: Abraham Lincoln 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: there’s a geocode wizard that will find them all at once.

Open the geocode wizard in a new window. The URL you copied from your spreadsheet will include a key and worksheet ID. The URL for the Lincoln spreadsheet is http://spreadsheets.google.com/feeds/list/pdFrt4IUcQBreGku49enQOA/od6/public/basic. The key is pdFrt4IUcQBreGku49enQOA and the worksheet ID is od6.

Enter your key and ID 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 new columns in your spreadsheet, and paste the latitude and longitude. (You should be able to copy and paste both columns at once.)

Example: Abraham Lincoln spreadsheet with latitude/longitude

3. MAKE A MAP!
Open the tabbed map wizard. Copy your key and worksheet ID into the new wizard, and identify the fields you used. Adjust the size of your map and the color for the markers (both can be changed later). If you use a rank, those numbers will show up in the map points; otherwise, they’ll be blank. The title of your map points will appear in the sidebar. If you do not use a sidebar, or you also want the title to appear in the tabbed window, include that information in the appropriate column. Preview your map and make any changes.

Below the map is the JSON code. If you do not already have one, sign up for a Google Map API key — that is what lets you embed the map on your Web site.

If your map will be on a stand-alone web page, mark the box above the code and HTML header/footer information will be added. Copy the code, add your API key and save it in a blank Wordpad, TextEdit or other plain text editor document as an HTML page.

If you want to embed your map on a blog, like I have done here, do not mark that box.
• Copy the code from //< ! [CDATA[ to //]]>. Save that as a JavaScript file -- mine is called lincoln.js. FTP that file to your server. Make sure you know where you save it.
• Add your API key to the header of your blog -- in WordPress, go to Design > Theme Editor > Header. In Blogger, go to Layout > Edit HTML. Other blog platforms will be similar. Once you've added the key to your blog, you will not have to sign up for another key. After you add the API key, look for the < body > tag and change it to < body onLoad="load()" onUnload="GUnload()" >. Remove the extra space after < and before >. This is needed for your map to load, and once it is changed you won't have to mess with it again.
• Before the tag, add your API key. When you sign up for the key, copy the format that looks like this:
  < script src="http://maps.google.com/maps?file=api&v=2&key=YOUR KEY HERE" type="text/javascript" > < /script >
• Create a new post and switch to HTML format. Add line at the top of your post:
  < script src="LINK TO YOUR JS FILE" type="text/javascript"> < /script>
  (I have added extra spaces after < to make the script show up here. Take those out)
• Go back to the map wizard, and copy the code at the top from < div style to < /div>. Paste that where you want the map to appear in your post.

You can make changes to the spreadsheet and the map will automatically update. Each address must be geocoded before the points will appear on the final map, though -- just repeat the geocode wizard.

There are several notes in the JSON 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 -- just in case.)