标记不会从我的Google云端硬盘坐标显示在Gmaps上

时间:2014-07-26 14:20:36

标签: html google-maps google-drive-api

我在Google云端硬盘中有一个电子表格,其中包含全球各个城市的“姓名”,“拉特”,“Lng”和“流行音乐”。我使用以下脚本创建了一个DoGet函数:

var SPREADSHEET_ID = '0ArgTJt0LQs91dFNXNnk1ZXVjTlE0SmE1MVFpTE5GQUE';
var SHEET_NAME = 'Data';

function doGet(request) {
    var range = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName(SHEET_NAME).getDataRange();
    var values = range.getValues();
    var cities = [];

    for (var i = 1; i < values.length; i++) 
    {
        var city = {
            name: values[i][0],
            latlng: [values[i][1], values[i][2]],
            population: values[i][3]
        };
        cities.push(city);
    }

    var json = Utilities.jsonStringify(cities);

    if (request && request.parameters) {
        var callback = request.parameters.jsonp;
        if (callback) {
            json = callback + '(' + json + ')';
        }
    }
    return ContentService.createTextOutput(json).setMimeType(ContentService.MimeType.JSON);
}

然后我使用以下网址部署为网络应用:https://script.google.com/macros/s/AKfycbwZyZI0saAdAruEYtvKDb0r1WofVfVzi7XIi6YQzq0s4BJqhnDZ/exec

以下是我的数据服务网址的脚本。只有地图会显示没有标记。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Awesome Map</title>

    <style>
      html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }

      #map_canvas {
        width: 100%;
        height: 100%;
      }
    </style>

    <script src="https://maps.google.com/maps/api/js?sensor=false"></script>

    <script>
       var DATA_SERVICE_URL = "https://script.google.com/macros/s/AKfycbwZyZI0saAdAruEYtvKDb0r1WofVfVzi7XIi6YQzq0s4BJqhnDZ/exec?jsonp=callback";

      var map;

      function initialize() {
        map = new google.maps.Map(document.getElementById('map_canvas'), {
          center: new google.maps.LatLng(0, 0),
          zoom: 2,
          maxZoom: 20,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var scriptElement = document.createElement('script');
        scriptElement.src = DATA_SERVICE_URL;
        document.getElementsByTagName('head')[0].appendChild(scriptElement);
      }

      function callback(data) {
        for (var i = 0; i < data.length; i++) {
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data[i][3], data[i][2]),
            map: map
          });
        }
      }
    </script>
  </head>

  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

数组索引从0开始,在创建标记位置时使用错误的项目。

这对我有用:

    function callback(data) {
      //note: i is set to 1, because the first row contains the column-names
      for (var i = 1; i < data.length; i++) {
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(data[i][1], data[i][2]),
          title:data[i][0],
          map: map
        });
      }      
    }