如何将CSV文件导入到Webapp的javascript中，以便我可以在Google Maps画布上放置地址标记？

Question

So I am a bit new to javascript and the Google maps API's. Currently I can place a marker given a single hard coded address variable called codeAddress.

codeAddress("99362");

function codeAddress(address) {
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

The problem is that I need to be able to place multiple markers based on location and need to be able to parse address data from a CSV file or from an sql database.

thanks for the help.

Answer 1

I've used the jquery-csv plugin to process csv files.

If you can give more specifics on where this csv file is coming from, and how it will be loaded, I can give info on how you can convert this into a javascript array. Will this file be on the server already? If so, then it would make more sense to do some server side processing to read the file.

The following shows how to modify your code to work with an array of multiple addresses:

var addresses = ["99362", "01010", "12345"];

jQuery.each(addresses, function(index, address) { 
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // we only need to center the map the first time
            if (index == 0)
                map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
})