Google MAPS API - опция маркеров не отображается при загрузке данных из электронной таблицы - PullRequest
Новая
       18

Google MAPS API - опция маркеров не отображается при загрузке данных из электронной таблицы

0 голосов
/ 09 апреля 2020

Я пытаюсь отобразить карту с опциями отображения значков. Я загружаю данные из таблицы. Я не получаю то, что хочу, например, наличие пользовательских значков при загрузке данных из моей электронной таблицы.

Для тестирования я пытался отображать значки двумя способами:

1) с данные, скопированные из журнала и при вызове карты (т. е. жестко закодированные): когда копирование вставлено, значки маркеров отображаются так, как я ожидаю, это нормально.

enter image description here

2) с данными, загруженными из электронной таблицы: даже если данные кажутся правильными и я вижу все ожидаемые маркеры, параметры не применяются: это не нормально, и я хочу получить точно такой же результат, что и при получении данных жестко закодированы.

enter image description here

Есть идеи, что происходит не так? Я скопировал большую часть этого из документации Google, чтобы установить параметры: Визуализация Карт Google Do c

Вот мой код: на GS 

function testMap2(){   

  var template = HtmlService.createTemplateFromFile("carte2");  
  var html = template.evaluate();
   html.setTitle("Display Map 2").setHeight(550).setWidth(550);
  SpreadsheetApp.getUi().showModalDialog(html, "Locations")

}//function testCarte1(){

function getNamesAndAddresses(){

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var a_values=ss.getRange("A1").getDataRegion().getValues();
  a_values.shift();

  var a_geo=a_values.map(function(r){
    return getGeocodeFromAddress(r[1]).concat(r[0]).concat(r[2])
  });

  //remove rows with entire blank row
  var a_geoClean=a_geo.filter(function(r){
    return  !r.every(function(cell){//Exclamation ==> "Not"
      return cell==="";
    });
  });

  a_geoClean.unshift(["Lat.","Long.","Name","Type"]);

  formatArrayForMapPurpose(a_geoClean);
  Logger.log(a_geoClean);
  /*
  [["Lat.", "Long.", "Name", "Type"], 
  [45.8167227, 4.8341048, "client1", "Client"], 
  [45.7660889, 4.794056299999999, "person1", "Intervenant"],
  [45.7813609, 4.8372174, "person2", "Intervenant"], 
  [45.7796433, 4.8037871, "person3", "Intervenant"]]
   */

  return a_geoClean;

}//function getNamesAndAddresses(){

Вкл. HTML: 

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">    

      window.onload = google.script.run.withSuccessHandler(onSuccess).getNamesAndAddresses();

      function onSuccess (arrayToData){

          google.charts.load("current", {
             "packages":["map"],
             "mapsApiKey": "xxx"
                           });                  

          google.charts.setOnLoadCallback(drawChart);      

          function drawChart() {      

          var data = google.visualization.arrayToDataTable(            
            arrayToData               
        //[["Lat.", "Long.", "Nom", "Type"], [45.8167227, 4.8341048, "client1", "Client"], [45.7660889, 4.794056299999999, "person1", "Intervenant"], [45.7813609, 4.8372174, "person2", "Intervenant"], [45.7796433, 4.8037871, "person3", "Intervenant"]]        
                     );      

             var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

         var options = {                
             showInfoWindow: true,
             useMapTypeControl: true,
             enableScrollWheel:true,
             mapType:"normal",
             icons: {
               Intervenant: {
                 normal:   url + 'Map-Marker-Ball-Azure-icon.png',
                 selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
               },
               Client: {
                 normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
                 selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
               },
               pink: {
                 normal:   url + 'Map-Marker-Ball-Pink-icon.png',
                 selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
               }
             }
           };


            var map = new google.visualization.Map(document.getElementById('map_div'));       
            map.draw(data,  options);        
          }// function drawChart() {

      }//function onSuccess (arrayToData){


    </script>
  </head>

Вот ссылка на его копию: Ссылка на тест моей карты

Большое спасибо за вашу помощь!

...