This page downloads a comma separated text file, parses it and populates map and sidebar with the data. The process is divided into a few separate functions.

• GDownloadUrl() loads the file.
• parseCsv() splits the text file into data cells and returns an array of GLatLng() objects with the line data array attached as a property.
• populateMap() loops through the point array and creates markers on map. It calls createInfoWindow() and addToSideBar() functions.
• showBounds() method fits the markers in viewport using paddings.
• The GLatLng() object is the single parameter that is needed for those functions because all the necessary information is attached to that object as properties.
• Two way interactive sidebar consists of <a> elements. Clicking a marker triggers focus() of corresponding sidebar entry.
• onfocus of sidebar entry triggers infowindow. You can use tab selecting too.

Application in mind?

• Make a html page with "map" and "sidebar" blocks.
• Copy/paste the script from this page.
• Include some CSV text file in the same directory and address them in the code
• That's it

• See the source. It is commented with some instructions.

More experiments  |  Blog