Online Maps with OpenLayers

Making a KML file using Google Docs / Spreadsheets

The quickest way to create and post a KML file online is to follow Google's directions for making a spreadsheet map.  This tool limits you to 400 points.

http://earth.google.com/outreach/tutorial_spreadsheet.html

Instead of entering each latitude and longitude, you can use this trick - http://apitricks.blogspot.com/2008/10/geocoding-by-google-spreadsheets.html - to get Google Spreadsheets to look up the location on Google Maps.

At the step where you copy the network link KML, take only the URL and download the file.  Copy this file onto a server, use your server to help OpenLayers connect to the URL, or use a text editor such as Notepad to copy the data and paste it into your OpenLayers map page.

Mapping using Google Fusion Tables

The Fusion Tables tool has been maintained by Google for over a year now, but it isn't as well known as Google Docs.  A fusion table is similar to a spreadsheet or database, but it is designed primarily for data on the web.  Google has built in a number of tools to showcase your data on Google Maps, which means it can be shown in OpenLayers, too.

There are two options to map using Google Fusion Tables.  Just like with spreadsheets, you can download all of the data in a KML file.  Google offers directions for adding multiple types of geodata (points, lines, shapes): http://www.google.com/support/fusiontables/bin/answer.py?hl=en&answer=174680 , customizing the appearance of the map http://earth.google.com/outreach/tutorial_fusion_sample.html , and downloading it as KML: http://www.google.com/support/fusiontables/bin/answer.py?answer=171215 
Just as you would with the spreadsheet's KML network link, use the URL part of the link to download the file and copy the data, or use your server to access it.

The second option is to use map tiles from Google Fusion Tables.  Instead of loading all of the data in your Google Fusion Table, your table creates tiles such as this one - http://mt0.googleapis.com/mapslt?hl=en-US&lyrs=ft%3A113681&x=67&y=39&z=7&w=256&h=256 - which are pasted over the map to create the illusion of marker icons.  This is an XYZ tile layer which can be added to OpenLayers, too.  Find the id number of your fusion table - the same you would use with Google Maps - and use it to replace the number 113681 (Google's sample layer) in the following example:

http://jsfiddle.net/UAxun/123/

Here are the key changes:

• allOverlays: true  in the map-creation options, so that both layers appear together
• fusionLayer = new OpenLayers.Layer.OSM("Fusion Table Map","http://mt0.googleapis.com/mapslt?hl=en-US&lyrs=ft:113681&x=${x}&y=${y}&z=${z}&w=256&h=256&source=maps_api");  // sets up the XYZ layer
• map.addLayer( fusionLayer );

The main problem with this method is that the points aren't clickable.  I would recommend using this method for something where there are many points that you want to show, but the user doesn't need to click, or you want them to get the real data from you.  You could also use events to recognize when and where the user clicks the map, and you could write a method to respond with a popup of nearby locations.