Fügen Sie benutzerdefinierten Wert zu Google Map Directons hinzu - WordPress, Google Maps, Post

Wie kann ich einen benutzerdefinierten Feldwert lesen und als Start und Ende festlegen, um die Google-Richtung anzuzeigen?

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

In WordPress Post habe ich 2 benutzerdefinierte Felder mit Start- und Zielwert und ich möchte Werte lesen und zur Funktion calcroute () hinzufügen, um diese Route auf Google Maps anzuzeigen.

Mein gesamter Code (unten) zeigt nur die zentrierte Ansicht von Chicago an

<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>

Antworten:

Sie müssen das auslösen calcRoute() irgendwo

Ich habe hier in jsfiddle ein funktionierendes Beispiel: http://jsfiddle.net/th9kwzdr/1/