How to use a csv file as input for Google Maps JavaScript API

Question

i have this js code (it is a sample for Google Maps), that build traces on Google Maps. For 4 coordinates, is fine, but i want to draw traces for 100 coordinates, and doing manually will be painfull. How do I do that?

function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: 30.20, lng: -97.7},
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var flightPlanCoordinates = [
      {lat: 30.2359091167, lng: -97.7951395833},
      {lat: 30.2691029532, lng: -97.7493953705},
      {lat: 30.2557309927, lng: -97.7633857727},
      {lat: 30.2634181234, lng: -97.7575966669},
      {lat: 30.2742918584, lng: -97.7405226231}
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    flightPath.setMap(map);
  }

What does you CSV look like? Does it have each coordinate on its own line? Need to know what it looks like to parse it. — andre mcgruder, Jun 07 '16 at 00:09
Yes, each coordinate on its own line, latitude and longitude — Isaias Hoyos, Jun 07 '16 at 00:25
related question: [Use GoogleMaps API from coordinates in a csv file in javascript](http://stackoverflow.com/questions/32409510/use-googlemaps-api-from-coordinates-in-a-csv-file-in-javascript) — geocodezip, Jun 07 '16 at 01:29

score 0 · Answer 1 · answered Jun 07 '16 at 00:01

You could try creating a function to convert the CSV into JSON format? i.e.

function csvToJSONCoordinates(data) {
    //Define an empty array for output
    output = [];
    //Split the data by lines
    lines = data.split("\n");
    //For every line recognised
    for(i=0;i<lines.length;i++) {
        //Split the data into latitude and longitude
        coords = lines[i].split(",");
        //Pus these coordinates to the output
        output.push({lat:coords[0], lng:coords[1]});
    }

    //Return the final output
    return output;
}

Personal experience suggests JSON data to be the easiest to manage over time and recently having worked a lot with the mapping APIs available, JSON is by far the most expandable if you can convert other formats to it.

score 0 · Answer 2 · answered Jun 08 '16 at 04:47

Sorry it took a while to get back to this. I worked this code up. I will work on asynchronous data. This is the sample CSV based on how you told me it looks.

var dataCSV = 'latitude,longitude\n\
               38.631913,-121.434879\n\
               38.478902,-121.431028\n\
               38.618305,-121.443839\n\
               38.616835,-121.439146\n\
               38.51947,-121.435768\n\
               38.662595,-121.327813\n\
               38.681659,-121.351705\n\
               38.535092,-121.481367\n\
               38.621188,-121.270555\n\
               38.700909,-121.442979\n\
               38.637663,-121.45152\n\
               38.470746,-121.458918\n\
               38.618698,-121.435833\n\
               38.482215,-121.492603\n\
               38.672914,-121.35934\n\
               38.700051,-121.351278\n\
               38.689591,-121.452239\n\
               38.679776,-121.314089\n\
               38.612099,-121.469095\n\
               38.689999,-121.46322\n\
               38.707851,-121.320707\n\
               38.468173,-121.444071\n\
               38.702792,-121.38221\n\
               38.628631,-121.488097\n\
               38.701499,-121.37622\n\
               38.70974,-121.37377\n\
               38.537526,-121.478315\n\
               38.476472,-121.501711\n\
               38.558423,-121.327948\n\
               38.472122,-121.404199\n\
               38.423251,-121.444489\n\
               38.691161,-121.37192\n\
               38.566663,-121.332644\n\
               38.713182,-121.411227\n\
               38.423251,-121.444489\n\
               38.48742,-121.462459\n\
               38.658246,-121.375469\n\
               38.479553,-121.463317\n\
               38.49857,-121.420925\n\
               38.58514,-121.403736\n\
               38.658812,-121.542345\n\
               38.493955,-121.48966\n\
               38.41653,-121.379653\n\
               38.72027,-121.331555\n\
               38.699251,-121.371414\n\
               38.613765,-121.488694\n\
               38.450543,-121.432538';

This is the function that processes the CSV file. You can pull the CSV in via AJAX.

function processCSV( myCSV ){
    var data = myCSV.split('\n'); // Converts the CSV into an array split on new line.

    /* This will remove the "latitude,longitude" text from the 
     coordinates if it is the top of the CSV file. If it is not at the 
    top then you can leave this out. */
    var dataShift = data.shift();

    var setData = data.map( function( val ) { // maps over the array.
            var latLng = val.split(',');      // splits each value into lat and lng. 
            return {'lat': latLng[0], 'lng': latLng[1] }; //sets the coordinate object.
        });
    return setData; // returns the data.
}

How to use a csv file as input for Google Maps JavaScript API

2 Answers2