如何使用 jQuery 和 JSON 将图钉添加到谷歌地图

Question

我正在尝试使用存储在 Google 表格中的邮政编码将图钉添加到 Google 地图。到目前为止，我已经能够使用 JSON 访问电子表格中的邮政编码：

$.getJSON('http://cors.io/?u=https://spreadsheets.google.com/feeds/list/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/od6/public/values?alt=json', function(data) {
    $.each(data.feed.entry, function(i, v) {
        var data = $('<div class="listing">').append('<h4 id="bandb">' + v.gsx$postcode.$t + '</h4>');
        $('body').append(data);
    });
});

我还可以使用邮政编码将图钉添加到 Google 地图。

示例：http://codepen.io/aljohnstone/pen/eJOyrP

我无法将两者结合起来。我希望 Codepen 中的 postcodes 变量从我的 Google 表格中获取邮政编码。

Answer 1

使用Google Maps Javascript API v3 的工作示例：

$(document).ready(function() {
  var geocoder = new google.maps.Geocoder();
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: {
      lat: 54,
      lng: -3
    },
    zoom: 5
  });
  var i;
  var postcodes = [];
  $.getJSON('http://cors.io/?u=https://spreadsheets.google.com/feeds/list/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/od6/public/values?alt=json', function(data) {
    $.each(data.feed.entry, function(i, v) {
      postcodes.push(v.gsx$postcode.$t);
    });
  }).done(function() {
    map.setCenter(new google.maps.LatLng(54.00, -3.00));
    map.setZoom(5);
    var bounds = new google.maps.LatLngBounds();
    for (i = 0; i < postcodes.length; i++) {
      geocoder.geocode({
        'address': "" + postcodes[i]
      }, (function(i) {
        return function(results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
              position: results[0].geometry.location,
              map: map,
              title: postcodes[i]
            });
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        }
      })(i));
    }
  });
});

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<div id="map_canvas"></div>

Answer 2

试试这个

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" type="text/javascript"></script>
<div id="map_canvas" style="width: 600px; height: 350px"></div>

<script type="text/javascript">
$(document).ready(function()
{
var geocoder = new GClientGeocoder();
       var map = new GMap2(document.getElementById("map_canvas"));
       var i;
       var postcodes = [];
       $.getJSON('http://cors.io/?u=https://spreadsheets.google.com/feeds/list/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/od6/public/values?alt=json', function(data) {
         $.each(data.feed.entry, function(i, v) 
         {
           postcodes.push(v.gsx$postcode.$t);
         });
       }).done(function()
       {
           map.setCenter(new GLatLng(54.00, -3.00), 5);
           for (i = 0; i < postcodes.length; i++) {
             geocoder.getLatLng(postcodes[i] + ', UK', function(point) {
               if (point) {
                 map.addOverlay(new GMarker(point));
               }
             });
           }
       });
});
</script>

工作示例http://codepen.io/snm/pen/eJOVMY?editors=101