我的 Google Drive 坐标中的标记不会显示在 Gmaps 上答案

【问题标题】：Markers won't show on Gmaps from my Google Drive coordinates我的 Google Drive 坐标中的标记不会显示在 Gmaps 上
【发布时间】：2014-07-26 14:20:35
【问题描述】：

我在 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);
}

然后我使用以下 URL 部署为 Web 应用程序：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>

【问题讨论】：

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

【解决方案1】：

数组索引从 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
        });
      }      
    }

【讨论】：

感谢您的快速反应，但应用您的更改后它仍然无法正常工作。
您使用错误的 MIME 类型提供脚本（必须是 JAVASCRIPT 而不是 JSON），大多数浏览器在使用错误的 MIME 类型提供脚本时不会执行脚本
我在 Chrome 和 IE 中使用 JSON Mime 类型进行了尝试。我使用的教程说它需要是 JSON youtube.com/watch?v=OS2Nj5G9cGs @ 2:38 我怎样才能使它工作或将其更改为 Java，以便它会自动显示我放入 Gdrive 中的坐标的标记？
教程不正确，MIME-type 必须是text/javascript。你会例如在 chrome 中得到以下错误：Refused to execute script from [script-url] because its MIME type ('application/json') is not executable, and strict MIME type checks is enabled. 要发送正确的 MIME-Type 使用 .setMimeType(ContentService.MimeType.JAVASCRIPT) 具有正确 Mime-Type 的演示：http://jsfiddle.net/doktormolle/mLGQW/
注意：请勿在脚本中使用演示中的 script-URL，这是我自己的宏，不会反映您的电子表格中的更改。