如何使用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); 
    }); 
}); 

我也能使用郵政編碼，以銷添加到谷歌地圖。

實施例：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