Problem when using Ajax to use Google Maps API

Question

Problem when using Ajax to use Google Maps API

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I want to use ajax to use a Google Maps API, but I do not know what it would be like in this case.

This is an example of the Google Maps documentation of how the route should be.

link

In javascript I have the following:

var waypoint = [];

function ordenLista(){

    $.ajax({
        url:"https://maps.googleapis.com/maps/api/directions/json",
        dataType:"json",
        data:{origin:{lat:posActualLat, lng:posActualLng},
              destination:{lat:-34.911946, lng:-56.160502},
              waypoints: (aca no se como poner) },

    });

}

The variable waypoint charges it with several addresses. Ex:

waypoint = ["address1", "address2", "address3", "address4"]; these are the directions by which the route will be marked.

I do not know how to fill the field waypoints: because my array would go waypoint and optimize=true to give me the best route.

If you know how I can do it or have some other way of doing it, I appreciate it.

javascript ajax google-maps

asked by Juan Manuel 07.12.2016 в 15:40

source

2 answers

0

As is done in the examples in the same api waypoint is an array of addresses. Example Google Api Here in this example, you have a multiple selector with several possibilities to select to go through:

<select multiple="" id="waypoints">
    <option value="montreal, quebec">Montreal, QBC</option>
    <option value="toronto, ont">Toronto, ONT</option>
    <option value="chicago, il">Chicago</option>
    <option value="winnipeg, mb">Winnipeg</option>
    <option value="fargo, nd">Fargo</option>
    <option value="calgary, ab">Calgary</option>
    <option value="spokane, wa">Spokane</option>
</select>

Where the selected options are traversed and loaded into an array.

The array waypts is declared empty, the html element is obtained with id waypoints and it is saved in the variable checkboxArray . Then this variable will be traversed and item by item will be added to the array waypoints where checkboxArray[i].value is the value of the selector: <option value="toronto, ont">Toronto, ONT</option>

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

answered by 07.12.2016 в 20:09

validation of a form through ajax and jquery-validate C # - Error Basic Authentication WebServices REST and POST method

score 1 · Accepted Answer

One way to convert your waypoints arrangement, you could be this:

// Datos a modo de ejemplo
var waypoints = [
    {id: '1', dir: 'Teresa Cabana de Moreno, Canelones, Departamento de Canelones, Uruguay', desc: 'Piso 1 - Dpto 2'},
    {id: '2', dir: 'Ansina, Sauce, Departamento de Canelones, Uruguay', desc: 'Casa azul'}
  ],
  posActualLat = -34.451757,
  posActualLng = -56.3960837;

// Funcion transformadora
function translateWaypoints(waypoints, optimizar) {
  var params = [];
  if (optimizar === true) {
    params.push('optimize:true');
  }
  $.each(waypoints, function(idx, waypoint) {
    params.push(waypoint.dir);
  });
  return params.join('|');
}

function ordenLista() {
  $.ajax({
      url: "https://maps.googleapis.com/maps/api/directions/json",
      dataType: "json",
      data: {
        key: 'YOUR_API_KEY',
        origin: posActualLat + ',' + posActualLng,
        destination: '-34.911946,-56.160502',
        waypoints: translateWaypoints(waypoints, true)
      }
    })
    .done(function(response) {
      console.log(response);
    });
}

ordenLista();