CODEWITHSUNDEEP
javascriptexcelgoogle-mapsgoogle-maps-api-3
Jaras
Jaras

Reputation: 21

Markers on google maps uploaded from excel(xlsx) file using Javascript

I am looking solution for my app. I need to upload excel file with data and then show all data from the file on google maps with multiple markers. I already found solution for second part (show multiple markers on google map):

 <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>

but how can I upload data from excel(I want user to submit file with data) and use it to show markers?
I am totally new to programming, so any help would be appreciated :)

Upvotes: 0

Views: 1691

Answers (2)

Thom
Thom

Reputation: 323

You can use may way , if you like to use PHP then this is the code 

<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>

You can get excel_reader.php from this below link

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

Upvotes: 0

Ozan
Ozan

Reputation: 3739

You can use SheetJS to parse excel files in javascript. They have two seperate versions for .xls and .xlsx files.

You can load the excell sheet using ajax. If you want to directly parse an excel sheet that the user inputs, you can use FileReader object and its .readAsBinaryString() method.

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" />

Upvotes: 1

Related Questions