Google Maps API: Reference to markers using setDirections - google-maps-api-3

Question

With the Google Maps Javascript API, one can display markers and directions between them using DirectionsService and DirectionsRenderer (examples)
const directionsService = new google.maps.DirectionsService()
const directionsDisplay = new google.maps.DirectionsRenderer()
const mapOptions = {
zoom:7,
center: loc // some coordinates
}
const map = new google.maps.Map(document.getElementById('map'), mapOptions)
directionsDisplay.setMap(map)
const request = {
origin: start, // some coordinates
destination: end, // some coordinates
travelMode: 'DRIVING'
}
directionsService.route(request, function(result, status) {
if (status == 'OK') {
directionsDisplay.setDirections(result)
}
})
The above will show two markers (start, end) on the map with the highlighted route between them. What I need is a reference to each of the markers created (to set custom labels, register events, etc). Any way to do this while still using directionsDisplay.setDirections(result) or would I need to create everything manually?

Answer 1

You can't (easily/safely) get references to the markers. You can set the suppressMarkers option of the DirectionsRenderer, then create your own "custom" markers, from the data in the response.
directionsService.route(request, function(result, status) {
if (status == 'OK') {
directionsDisplay.setDirections(result);
createMarker(result.routes[0].legs[0].start_location, "A", "start marker", map, infowindow);
var lastLeg = result.routes[0].legs.length - 1;
createMarker(result.routes[0].legs[lastLeg].end_location, "B", "end marker", map, infowindow);
}
});
proof of concept fiddle
code snippet:
function initialize() {
const directionsService = new google.maps.DirectionsService();
const directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
var infowindow = new google.maps.InfoWindow();
const mapOptions = {
zoom: 7,
center: new google.maps.LatLng(37.4419, -122.1419) // some coordinates
}
const map = new google.maps.Map(document.getElementById('map'), mapOptions)
directionsDisplay.setMap(map)
const request = {
origin: {
lat: 37.4418834,
lng: -122.1430195
}, // some coordinates
destination: {
lat: 37.4529598,
lng: -122.1817252
}, // some coordinates
travelMode: 'DRIVING'
}
directionsService.route(request, function(result, status) {
if (status == 'OK') {
directionsDisplay.setDirections(result);
createMarker(result.routes[0].legs[0].start_location, "A", "start marker", map, infowindow);
var lastLeg = result.routes[0].legs.length - 1;
createMarker(result.routes[0].legs[lastLeg].end_location, "B", "end marker", map, infowindow);
}
})
}
google.maps.event.addDomListener(window, "load", initialize);
// Adds a marker to the map.
function createMarker(location, label, content, map, infowindow) {
var marker = new google.maps.Marker({
position: location,
label: label,
title: label,
map: map
});
marker.addListener('click', function(e) {
infowindow.setContent(content);
infowindow.open(map, this);
})
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>