使用Google地图API使用CSV数据加载纬度经度数据

Question

我想使用Google的Map API使用CSV文件加载地图数据。我尝试以下示例：https://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

我试图加载它，它显示了点击标记的一些信息。

我的CSV数据看起来像这样

LGA_NAME  Lat    Long  Information 
DANDENONG -37.98862 145.21805 something crashed 
DANDENONG -37.98862 145.21805 something crashed 
DANDENONG -37.98862 145.21805 something crashed 
DANDENONG -37.98862 145.21805 something crashed 
DANDENONG -37.98862 145.21805 something crashed 

https://jsfiddle.net/sourabhtewari/ye96s94c/2/

我似乎无法加载任何数据。它显示出一个空白。不知道可能是什么问题。如果有人能纠正它，我会很感激。

function initialize() { 
    var map; 
    var bounds = new google.maps.LatLngBounds(); 
    var mapOptions = { 
    mapTypeId: 'roadmap' 
    }; 

    // Display a map on the page 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    map.setTilt(45); 

    // Multiple Markers 
    var markers = []; 

    // Info Window Content 
    var infoWindowContent = []; 

    $.get('https://dl.dropboxusercontent.com/u/97162408/crashdata.csv', function(data) { 
    var data = csvToArray(data); 
    data.forEach(function(item) { 
     { 
     markers.push([item.LGA_NAME, parseFloat(item.Lat), parseFloat(item.Long)]); 

     infoWindowContent.push([item.Information]); 
     } 
    }); 

    }); 
    console.log(infoWindowContent); 


    function csvToArray(csvString) { 

    // The array we're going to build 
    var csvArray = []; 
    // Break it into rows to start 
    var csvRows = csvString.split(/\n/); 

    // Take off the first line to get the headers, then split that into an array 
    var csvHeaders = csvRows.shift().split(','); 

    // Loop through remaining rows 
    for (var rowIndex = 0; rowIndex < csvRows.length; ++rowIndex) { 
     var rowArray = csvRows[rowIndex].split(','); 

     // Create a new row object to store our data. 
     var rowObject = csvArray[rowIndex] = {}; 

     // Then iterate through the remaining properties and use the headers as keys 
     for (var propIndex = 0; propIndex < rowArray.length; ++propIndex) { 
     // Grab the value from the row array we're looping through... 
     var propValue = rowArray[propIndex]; 
     // ...also grab the relevant header (the RegExp in both of these removes quotes) 
     var propLabel = csvHeaders[propIndex]; 

     rowObject[propLabel] = propValue; 
     } 
    } 
    return csvArray; 
    } 


    // Display multiple markers on a map 
    var infoWindow = new google.maps.InfoWindow(), 
    marker, i; 

    // Loop through our array of markers & place each one on the map 
    for (i = 0; i < markers.length; i++) { 
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
    bounds.extend(position); 
    marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     title: markers[i][0] 
    }); 

    // Allow each marker to have an info window  
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
     infoWindow.setContent(infoWindowContent[i][0]); 
     infoWindow.open(map, marker); 
     } 
    })(marker, i)); 

    // Automatically center the map fitting all markers on the screen 
    map.fitBounds(bounds); 
    } 

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
    this.setZoom(14); 
    google.maps.event.removeListener(boundsListener); 
    }); 

} 

Answer 1

$ .get超出了所需对象的范围。愚蠢的错误，但修复很容易。

小提琴：https://jsfiddle.net/sourabhtewari/aLk0c2fa/

$.get('https://dl.dropboxusercontent.com/u/97162408/crashdata.csv', function(data) { 
    function initialize() { 
     var bounds = new google.maps.LatLngBounds(); 
     var mapOptions = { 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

     }; 

     // Display a map on the page 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     map.setTilt(45); 

     // Multiple Markers 
     var markers = []; 

     // Info Window Content 
     var infoWindowContent = []; 

     data = csvToArray(data); 
     data.forEach(function(item) { 
     markers.push([item.LGA_NAME, parseFloat(item.Lat), parseFloat(item.Long)]); 
     infoWindowContent.push([item.Information]); 
     }); 

     // Display multiple markers on a map 
     var infoWindow = new google.maps.InfoWindow(), 
     marker, i; 

     // Loop through our array of markers & place each one on the map 
     for (i = 0; i < markers.length - 1; i++) { 
     console.log(markers[i][1]); 
     var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 

     bounds.extend(position); 
     marker = new google.maps.Marker({ 
      position: position, 
      map: map, 
      title: markers[i][0] 
     }); 

     // Allow each marker to have an info window  
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
      infoWindow.setContent(infoWindowContent[i][0]); 
      infoWindow.open(map, marker); 
      } 
     })(marker, i)); 

     // Automatically center the map fitting all markers on the screen 
     map.fitBounds(bounds); 
     } 

     // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
     var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
     this.setZoom(8); 
     google.maps.event.removeListener(boundsListener); 
     }); 

    } 
    initialize(); 
    }); 

    function csvToArray(csvString) { 

    // The array we're going to build 
    var csvArray = []; 
    // Break it into rows to start 
    var csvRows = csvString.split(/\n/); 

    // Take off the first line to get the headers, then split that into an array 
    var csvHeaders = csvRows.shift().split(','); 

    // Loop through remaining rows 
    for (var rowIndex = 0; rowIndex < csvRows.length; ++rowIndex) { 
     var rowArray = csvRows[rowIndex].split(','); 

     // Create a new row object to store our data. 
     var rowObject = csvArray[rowIndex] = {}; 

     // Then iterate through the remaining properties and use the headers as keys 
     for (var propIndex = 0; propIndex < rowArray.length; ++propIndex) { 
     // Grab the value from the row array we're looping through... 
     var propValue = rowArray[propIndex]; 
     // ...also grab the relevant header (the RegExp in both of these removes quotes) 
     var propLabel = csvHeaders[propIndex]; 

     rowObject[propLabel.trim()] = propValue; 
     } 
    } 
    return csvArray; 
    }