How to load contet of text file in to javascript variable?

Question

Im trying to use the google map with locations script. What i need is to make the locations to be loaded from .txt file. I need to get this

googleMapGenerator.options.locations = [ ... locations.txt ]

To be extracted from : locations.txt

Here is snippet with working demo : https://codepen.io/clintabrown/pen/jEOmZK

Here is the source code :

Javscript

    <script src="googlemaps.min.js"></script>
    <script>
        /**
         *  Plugin config and init
         */

        // Config
            googleMapGenerator.options.mapLat = 40.77;
            googleMapGenerator.options.mapLng = -73.98;
            googleMapGenerator.options.mapZoom = 12;
            googleMapGenerator.options.markerIconType = 'numeric';
        googleMapGenerator.options.markerIconHexBackground = 'ff6600';
        googleMapGenerator.options.markerIconHexColor = '000000';
        googleMapGenerator.options.hasPrint = false;
        googleMapGenerator.options.locations = [
          ['Central Park', 'New York, NY', 'Central Park is an urban park in the central part of the borough of Manhattan, New York City . It was initially opened in 1857, on 778 acres of city-owned land.', 40.783121, -73.965366, 1],
          ['Times Square', 'Manhattan, NY 10036', 'Times Square is a major commercial intersection and a neighborhood in Midtown Manhattan, New York City, at the junction of Broadway and Seventh Avenue and stretching from West 42nd to West 47th Streets.', 40.759159, -73.985131, 2],
          ['Empire State Building', '350 5th Ave, New York, NY 10118', 'The Empire State Building is a 103-story skyscraper located in Midtown Manhattan, New York City, at the intersection of Fifth Avenue and West 34th Street.', 40.748704, -73.985707, 3],
          ['Metropolitan Museum of Art', '1000 5th Ave, New York, NY 10028', 'The Metropolitan Museum of Art, located in New York City, is the largest art museum in the United States and one of the ten largest in the world.', 40.779701, -73.963255, 4],
          ['Rockefeller Center', '45 Rockefeller Plaza, New York, NY 10111', 'Rockefeller Center is a complex of 19 commercial buildings covering 22 acres between 48th and 51st streets in New York City, United States.', 40.758980, -73.978685, 5],
          ['Museum of Modern Art', '11 W 53rd St, New York, NY 10019', 'The Museum of Modern Art is an art museum located in Midtown Manhattan in New York City between Fifth and Sixth Avenues.', 40.761656, -73.977601, 6]
        ];

Answer 1

Here is an example I wrote as to how to load a file with Javascript: https://jsfiddle.net/BrandonQDixon/dhvjz5wp/

The following function will get this done. The first parameter is the file to read, the second is the function to execute upon completion. This cannot directly return the value because a file is read asynchronously, which means the actual getFileContents script will execute and terminate before the file is load. This sets an event listener for when the reader has finished reading the file, then executes a function you specify in the second parameter func. In that function, you can get the file contents and give it to a variable. Make sure your provided function has a parameter for the String contents of the file.

/**
* This will read a file, then execute a function with the contents
* @param file to read
* @param function to execute upon load
*/
function getFileContents(file,func) {
    var reader = new FileReader();
    var contents;
    reader.onload = function(e) {
        func(reader.result);
    }
    reader.readAsText(file);
}