将自定义值添加到Google地图指南

时间:2015-06-05 20:27:48

标签: wordpress google-maps post

如何阅读自定义字段值并设置为start&结束以显示谷歌方向

function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
  waypts.push({
      location:checkboxArray[i].value,
      stopover:true});
}
}

在wordpress帖子中我有2个自定义字段,包含起始值和目标值,我希望读取值并添加到函数calcroute()以便在谷歌地图上显示该路线。

我的整个代码(下方)仅显示芝加哥的中心视图

<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}

function calcRoute() {
var start = document.getElementById('plecare_din').value;
var end = document.getElementById('destinatie').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
 if (checkboxArray.options[i].selected == true) {
  waypts.push({
      location:checkboxArray[i].value,
      stopover:true});
 }
}

var request = {
   origin: start,
  destination: end,
  waypoints: waypts,
  optimizeWaypoints: true,
  travelMode: google.maps.TravelMode.DRIVING
};

}

google.maps.event.addDomListener(window, 'load', initialize);

 </script>

1 个答案:

答案 0 :(得分:1)

你必须在某个地方触发calcRoute()

我在jsfiddle中有一个工作示例: http://jsfiddle.net/th9kwzdr/1/