Add Markers to Google Map from CSV

I was recently asked to create an HTML page that would access a CSV file containing a list of latitude/longitude values and generate a map with markers for each location. This project was a proof-of-concept challenge for me so I’ve really just made a barebones implementation. That said, it should be very easy to expand using only Google’s API documentation for reference. Google Maps were the clear choice as they’ve become a bit of a de facto standard. Enough – let’s dig into the code!

This block of Javascript converts a local CSV file to a multidimensional array that can be easily accessed and manipulated within memory:

This initialization function is all it takes to generate a Google Map and add all of our markers:

Using these two functions, all it takes to generate the actual map is a single line of code:

You can see this code in action right here: http://sideapps.com/smart911/

If you’re interested in the CSV file it can be downloaded here: http://sideapps.com/smart911/zip-lat-long.csv

I must admit, I am a bit prejudiced toward web applications… However, I found Google’s API and the small amount of Javascript I had to learn very pleasant. I anticipated a much longer process and was very happy to be able to complete the task so logically and directly. Hopefully this helps someone out!

 

Leave a Reply

Your email address will not be published. Required fields are marked *