Добавление маркера клика на Google Maps для расчета расстояния до маркера

Question

Я пытаюсь добавить событие щелчка, когда я нажимаю на место на карте, получаю местоположение пользователя, затем они нажимают на маркер, и он рассчитывает маршрут и отображает расстояние. Пока это мой код, который нацелен на добавление маркера на карту, когда пользователь нажимает

map.addListener('click', function(e) { //allows user to place a marker upon 
a click
    placeMarker(e.latLng, map);
});

var marker;

function placeMarker(location, map) { //current location marker function, 
for direction service origin
    if (marker) {
        marker.setPosition(location);

    } else {

        var icon  = { //custom icon for the current location marker
            url: 'https://cdn2.iconfinder.com/data/icons/snipicons/500/map- 
marker-128.png',
            scaledSize: new google.maps.Size(45, 45)
        };

        marker = new google.maps.Marker({
            position: location,
            map: map,
            icon: icon,
            animation: google.maps.Animation.DROP
        });
    }

    //place location for direction service
    lat3 = marker.getPosition().lat();
    lng3 = marker.getPosition().lng();

    map.setCenter(location);

    clickWindow(false, infowindow, map.getCenter(), map);

    marker.addListener('mouseover', function () { //mouseover to remind user 
 of current location
        //resultsMap.setCenter(marker);
        infowindow.open(map, this);
        infowindow.setContent("Current Location");

    });

    marker.addListener('mouseout', function () {
        infowindow.close(map, marker);
    });

    }

function clickWindow(input, infowindow, location, map) { //called when 
current location marker is placed
    infowindow.setContent("Location Set");
    infowindow.setPosition(location);
    infowindow.open(map);

}

}

Однако теперь моя карта больше не загружается, есть предложения, почему это может происходить? Спасибо

Answer 1

Вот одно из решений; Я включил некоторые комментарии, чтобы объяснить некоторые части кода:

let map;
let currentLocationMarker;
// Random markers that act as points of destination
let markerPositions = [
  {lat: 30.326595, lng: -97.726331},
  {lat: 30.388733, lng: -97.745052},
  {lat: 30.378010, lng: -97.676278},
  {lat: 30.290691, lng: -97.772070}
];
let directionsService;
let directionsDisplay;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 30.326595, lng: -97.726331},
      zoom: 12
  });

  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer({map: map});

  addMarkers(markerPositions);
  map.addListener('click', setCurrentLocation);
}

// Add a marker when the user clicks on the map
function setCurrentLocation(e) {
  // If there is no marker, create one
  if (!currentLocationMarker) {
    currentLocationMarker = new google.maps.Marker({
      position: e.latLng,
      map: map,
      label: 'Me'
    });
  // Otherwise, update its position
  } else {
    currentLocationMarker.setPosition(e.latLng);
  }
}

// Add the markers that act as random destination points
function addMarkers(positions) {
  positions.forEach(position => {
    let marker = new google.maps.Marker({
      position: position,
      map: map
    })
    // Set a click listener to each destination marker
    marker.addListener('click', () => getRoute(position));
  })
}

// Gets the route between the user generated marker and the random marker that was clicked
function getRoute(position) {
  if (!currentLocationMarker) return alert('Click on the map to set your location first.')
  directionsService.route({
    origin: currentLocationMarker.position,
    destination: position,
    travelMode: 'DRIVING'
  }, (result, status) => {
    if (status !== 'OK') return alert(`Error: ${status}`);
    directionsDisplay.setDirections(result);
  });
}

А вот JSBin с рабочим примером.