Esa's Google Maps API experiments

File: .html .html .html .html .html .html .html .txt
Load: Lidl Zweden Lidl Nederland
Aldi Nederland
Netto Zweden
Paalkamperen
Paalkamperen
Veel Aldi's
Craters
(10)
ResultsMap Kitchen [Part 2]Marker data from a text file

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