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 will parse a delimited string into an array of
// arrays. The default delimiter is the comma, but this
// can be overriden in the second argument.
function CSVToArray( strData, strDelimiter ){
	// Check to see if the delimiter is defined. If not,
	// then default to comma.
	strDelimiter = (strDelimiter || ",");

	// Create a regular expression to parse the CSV values.
	var objPattern = new RegExp(
		(
			// Delimiters.
			"(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +

			// Quoted fields.
			"(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +

			// Standard fields.
			"([^\"\\" + strDelimiter + "\\r\\n]*))"
		), "gi");

	// Create an array to hold our data. Give the array
	// a default empty first row.
	var arrData = [[]];

	// Create an array to hold our individual pattern
	// matching groups.
	var arrMatches = null;

	// Keep looping over the regular expression matches
	// until we can no longer find a match.
	while (arrMatches = objPattern.exec( strData ))
	{
		// Get the delimiter that was found.
		var strMatchedDelimiter = arrMatches[ 1 ];

		// Check to see if the given delimiter has a length
		// (is not the start of string) and if it matches
		// field delimiter. If id does not, then we know
		// that this delimiter is a row delimiter.
		if (strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter))
		{
			// Since we have reached a new row of data,
			// add an empty row to our data array.
			arrData.push( [] );

		}

		// Now that we have our delimiter out of the way,
		// let's check to see which kind of value we
		// captured (quoted or unquoted).
		if (arrMatches[ 2 ]){
			// We found a quoted value. When we capture
			// this value, unescape any double quotes.
			var strMatchedValue = arrMatches[ 2 ].replace(
				new RegExp( "\"\"", "g" ),
				"\""
				);

		} else 
		{
			// We found a non-quoted value.
			var strMatchedValue = arrMatches[ 3 ];
		}

		// Now that we have our value string, let's add
		// it to the data array.
		arrData[ arrData.length - 1 ].push( strMatchedValue );
	}

	// Return the parsed data.
	return( arrData );
}

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

function initialize() 
{	
	// Set lat/long to center on the USA
	var lat = 39.8282;
	var lng = -98.5795;
	var zm = 5;

	// Configure the starting variables for the map
	var mapOptions = {
		center: new google.maps.LatLng(lat, lng),
		zoom: zm,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	// Generate the actual map
	var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

	var returnValue = "";
	var request = new XMLHttpRequest();

	// Read the lat/long info for markers
	request.open("GET", "zip-lat-long.csv", false);
	request.send(null);
	returnValue = request.responseText;

	// Convert our data from the CVS file to a usable array
	var data = CSVToArray(returnValue);

	for (var i = 0; i < data.length; i++) 
	{
		// Create a lat/long object readable by Google
		var myLatlng = new google.maps.LatLng(parseFloat(data[i][1]), parseFloat(data[i][2]));

		// Generate a marker from the lat/long object and add it to the map
		var marker = new google.maps.Marker({
			position: myLatlng,
			map: map,
			title:data[i][0]
		});
	}	
}

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

// Initialize the Google Map
google.maps.event.addDomListener(window, 'load', initialize);

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!

 

One thought on “Add Markers to Google Map from CSV

  1. Hi there,

    I used your code for importing multiple markers and plotting them on google maps but somehow the csv file doesn’t get recognised hence the markers don’t work. Can you help on what could be the reason?

Leave a Reply

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