Tengo un problemita que no logro solucionar. Con la api de google maps creé marcadores con el listener para que aparecieran donde se 'clickee' dentro del mapa y estoy tratando de que al momento de clickearlos me vaya creando la ruta. Agradecería mucho la ayuda!
Adjunto mi código, llevo rato investigando y tratando de solucionarlo.
Estoy usando html y css con el ide Visual Basic Code. Si alguien me podría aclarar mi error sería de gran ayuda para poder ir mejorando ya que aún soy novato en esto.
// En el siguiente ejemplo, los marcadores aparecen cuando el usuario hace clic en el mapa..
//
// Cada marcador está etiquetado con un solo carácter alfabético.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;
function initMap() {
const punto_1 = { lat: -38.7358976, lng: -72.5925679 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: punto_1,
});
// Este Listener llama a addMarker() cuando se hace clic en el mapa.
google.maps.event.addListener(map, "click", (event) => {
addMarker(event.latLng, map);
});
// Agrega un marcador en el centro del mapa.
addMarker(punto_1, map);
// dos constantes instanciando directionsservices y directionrenderer
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer({
// si puede ser arrastrado
draggable: true,
map,
panel: document.getElementById("right-panel"),
});
directionsRenderer.addListener("directions_changed", () => {
computeTotalDistance(directionsRenderer.getDirections());
});
displayRoute(
lat,
lng,
directionsService,
directionsRenderer
);
}
// Agrega marcador al mapa.
function addMarker(location, map) {
// Agrega marcador a la posicion clickeada, y agrega
// con un array por orden alfabetico.
new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
map: map,
});
}
function displayRoute(origin, destination, service, display) {
service.route(
{
origin: "Adelaide, SA",
destination: "Broken Hill, NSW",
waypoints: [
{ location: "Adelaide, SA" },
{ location: "Broken Hill, NSW" },
],
travelMode: google.maps.TravelMode.DRIVING,
avoidTolls: true,
},
(result, status) => {
if (status === "OK") {
display.setDirections(result);
} else {
alert("Could not display directions due to: " + status);
}
}
);
}
function computeTotalDistance(result) {
let total = 0;
const myroute = result.routes[0];
for (let i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById("total").innerHTML = total + " km";
}