Javascriptを使用してexcel（xlsx）ファイルからアップロードされたGoogleマップのマーカー

Question

私のアプリの解決方法を探しています。私はデータをアップロードしてファイルをアップロードし、ファイルからすべてのデータを複数のマーカーでGoogleマップに表示する必要があります。エクセルやマーカーを表示するためにそれを使用する（私は、ユーザーがデータを使用してファイルを提出したい）から

<script> 

    function initialize() { 
    var mapDiv = document.getElementById('mymap'); 
    var mapOptions = {   
     center: new google.maps.LatLng (-33.865143, 151.209900), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(mapDiv, mapOptions); 

    var locations = []; 
    locations.push ({name:"Bondi Beach", latlng: new google.maps.LatLng(-33.890542, 151.274856)}); 
    locations.push ({name:"Coogee Beach", latlng: new google.maps.LatLng(-33.923036, 151.259052)}); 
    locations.push ({name:"Cronulla Beach", latlng: new google.maps.LatLng(-34.028249, 151.157507)}); 
    locations.push ({name:"Manly Beach", latlng: new google.maps.LatLng(-33.80010128657071, 151.28747820854187)}); 

    for (var i = 0; i < locations.length; i++) { 
     var marker = new google.maps.Marker({position: locations[i].latlng, map:map, title:locations[i].name}); 
    } 
    } 

    window.onload = initialize; 

</script> 

が、どのように私はアップロードできるデータ：私はすでに第二部のためのソリューションを た（複数のGoogleマップ上のマーカーを表示）？
私はプログラミングに全く新しいので、どんな助けもありがとうと思います。

Answer 1

SheetJSを使用すると、javascriptでExcelファイルを解析できます。彼らは.xlsと.xlsxファイルの2つの別バージョンを持っています。

• SheetJS/js - xls
• SheetJS/ js - xlsx

あなたはajaxを使用してエクセルシートを読み込むことができます。ユーザーが入力したExcelシートを直接解析する場合は、FileReaderオブジェクトとその.readAsBinaryString()メソッドを使用できます。

document.getElementById("excel").addEventListener("change", function(e) { 
 
    var file = e.target.files[0]; 
 

 
    //Verify that the selected file was an supported worksheet file. 
 
    //You can check file.name and file.type properties for this validation 
 

 
    var reader = new FileReader(); 
 

 
    reader.onload = function(e) { 
 
     var data = e.target.result; 
 

 
     /* if binary string, read with type 'binary' */ 
 
     var workbook = XLS.read(data, { 
 
      type: 'binary' 
 
     }); 
 
     
 
     console.log(workbook.Sheets[workbook.SheetNames[0]]["A1"].v); //Read the value of the A1 cell in the first worksheet 
 
     /* DO SOMETHING WITH workbook HERE */ 
 
    }; 
 
    reader.readAsBinaryString(file); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.5/xls.full.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.full.min.js"></script> 
 

 
<input type="file" id="excel" />

Answer 2

あなたがPHPを使用したい場合、これはあなたがからexcel_reader.php得ることができるコード

<script> 
 

 
    function initialize() { 
 
    var mapDiv = document.getElementById('mymap'); 
 
    var mapOptions = {   
 
     center: new google.maps.LatLng (-33.865143, 151.209900), 
 
     zoom: 12, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(mapDiv, mapOptions); 
 

 
    var locations = []; 
 

 
<?php 
 
include 'excel_reader.php';  // include the class 
 
$excel = new PhpExcelReader;  // creates object instance of the class 
 
$excel->read('excel_file.xls'); // reads and stores the excel file data 
 

 
// Test to see the excel data stored in $sheets property 
 
$data = $excel->sheets; 
 
while() 
 
{ 
 
    echo "locations.push ({name:'".$data[i]['name']."', latlng: new google.maps.LatLng(".$data[i]['la'].", ".$data[i]['lng'].")});" 
 
} 
 

 
php?> 
 
for (var i = 0; i < locations.length; i++) { 
 
     var marker = new google.maps.Marker({position: locations[i].latlng, map:map, title:locations[i].name}); 
 
    } 
 
    } 
 

 
    window.onload = initialize; 
 

 
</script>

で、5月の方法を使用することができますこれ以下のリンク

http://coursesweb.net/php-mysql/read-excel-file-data-php_pc