Google Maps v3 - hide/modify map markers in the DirectionsRenderer - dom

Question

I'm using Google Maps v3.
I've already suppressed markers to display my own on the map itself.
I want to modify the ones displayed in the directions div but the images have no IDs or Classes
<img jsvalues=".src:markerIconPaths[$waypointIndex]" jstcache="13" src="http://maps.gstatic.com/intl/en_us/mapfiles/icon_greenA.png">
Is there some other way to modify the source, or do I need to roll my own directions renderer?

Answer 1

I was also having an issue with the markers in the directions output. There was no way to replace the markers without some extremely cumbersome js, which then had to include workarounds for the turn-by-turn directions, etc.
A simple way to do it is by css:
The A line is a table:
<table id="adp-placemark" class="adp-placemark" jstcache="0">
and B line is:
<table class="adp-placemark" jstcache="0">
So the following css will change the markers:
#adp-placemark img, .adp-placemark img {
display:none;
}
#adp-placemark {
font-weight: bold;
padding: 10px 10px 10px 30px;
background: white url(../images/map_icons/number_1.png) no-repeat left center;
}
.adp-placemark {
font-weight: bold;
padding: 10px 10px 10px 30px;
background: white url(../images/map_icons/number_2.png) no-repeat left center;
}

Answer 2

I also had a problem with access to marker "inside" directions render and didn't find any solution that would be good enough for me... So I made it by myself and created a little JavaScript class. I hope it will be helpful.
It uses only API documented methods and properties.
I'm looking forward for any comments and code improvements.
My code at: http://jsfiddle.net/mzwjW/6/
Edit: Just copied the whole JavaScript code here.
var map;
var custom;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(52.87916, 18.32910),
mapTypeId: 'terrain'
};
var markers = [];
$(function() {
map = new google.maps.Map($('#map')[0], myOptions);
custom = new customDirectionsRenderer(new google.maps.LatLng(50.87916, 16.32910), new google.maps.LatLng(52.87916, 16.32910), map);
//you have access to marker :)
custom.startMarker.setTitle('POLAND!!');
});
function customDirectionsRenderer(startPoint, endPoint, map) {
//!!!!! reference to our class
var that = this;
this.directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
suppressMarkers: true,
map: map
});
google.maps.event.addListener(this.directionsDisplay, 'directions_changed', function () {
checkWaypoints();
});
this.directionsService = new google.maps.DirectionsService();
var draggedMarker;
var waypointsMarkers = new Array();
this.map = map;
this.polyline = '';
this.polylinePoints = [];
//<-- create Start and Stop Markers
this.startMarker = new google.maps.Marker({
position: startPoint,
title: 'Start',
map: map,
draggable: true,
optimized: false
});
this.endMarker = new google.maps.Marker({
position: endPoint,
title: 'End',
map: map,
draggable: true,
optimized: false
});
//-->
//<-- add events listeners to Start/Stop Markers
google.maps.event.addListener(this.startMarker, 'dragend', dragEnd);
google.maps.event.addListener(this.startMarker, 'dragstart', dragStart);
google.maps.event.addListener(this.startMarker, 'drag', drag);
google.maps.event.addListener(this.endMarker, 'dragend', dragEnd);
google.maps.event.addListener(this.endMarker, 'dragstart', dragStart);
google.maps.event.addListener(this.endMarker, 'drag', drag);
//-->
//<-- update directionsRenderer true - snap markers to nearest streets
update(true);
//-->
//<--privates
////<-- event handlers
function dragStart() {
draggedMarker = this;
}
function dragEnd() {
clearTimeout(this.timeout);
update(true);
}
function drag() {
if (this.timeout !== undefined) {
return;
}
this.timeout = setTimeout(function () { update(false); }, 200);
}
////-->
////<-- create draggable markers for Waypoints from given array of latlng objects
function createWaypointsMarkers(wpoints) {
$.each(waypointsMarkers, function (idx, obj) {
obj.setMap(null);
});
waypointsMarkers = [];
$.each(wpoints, function (idx, obj) {
var marker = new google.maps.Marker({
position: obj,
map: that.map,
draggable: true,
optimized: false,
title: idx.toString()
});
waypointsMarkers.push(marker);
google.maps.event.addListener(marker, 'dragend', dragEnd);
google.maps.event.addListener(marker, 'dragstart', dragStart);
google.maps.event.addListener(marker, 'drag', drag);
});
}
////-->
////--> check if new waypoint was created
function checkWaypoints() {
if (that.directionsDisplay.getDirections() !== undefined) {
if (waypointsMarkers.length !=
that.directionsDisplay.getDirections().routes[0].legs[0].via_waypoints.length) {
createWaypointsMarkers(that.directionsDisplay.getDirections().routes[0].legs[0].via_waypoints);
}
}
}
////-->
////--> Update directionsRenderer when move or drop marker
////bool setMarkersPositions - snap markers to nearest streets?
function update(setMarkersPositions) {
if (draggedMarker !== undefined) {
draggedMarker.timeout = undefined;
}
that.directionsDisplay.preserveViewport = true;
checkWaypoints();
var waypoints = [];
$.each(waypointsMarkers, function (idx, obj) {
waypoints.push({ location: obj.getPosition(), stopover: false });
});
var request = {
origin: that.startMarker.getPosition(),
destination: that.endMarker.getPosition(),
waypoints: waypoints,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
that.directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
that.directionsDisplay.setDirections(response);
if (waypointsMarkers.length != response.routes[0].legs[0].via_waypoints.length) {
createWaypointsMarkers(response.routes[0].legs[0].via_waypoints);
}
if (setMarkersPositions) {
that.startMarker.setPosition(response.routes[0].legs[0].start_location);
that.endMarker.setPosition(response.routes[0].legs[0].end_location);
$.each(response.routes[0].legs[0].via_waypoints, function (idx, obj) {
waypointsMarkers[idx].setPosition(obj);
});
that.polyline = response.routes[0].overview_polyline.points;
that.polylinePoints = response.routes[0].overview_path;
}
}
});
}
////-->
//-->
}
customDirectionsRenderer.prototype = new google.maps.MVCObject();
​

Answer 3

YES !
very nice with css
#adp-placemark img,.adp-placemark img{display:none}
#adp-placemark{height:31px;background:#fff url(../img/marker_start.png) no-repeat left center}
#adp-placemark .adp-text,.adp-placemark .adp-text{height:31px;font-weight: bold;padding-left:29px}
.adp-placemark{background:#fff url(../img/marker_end.png) no-repeat left center}
with marker_start.png and marker_end.png 19px * 31px
I don't know ther is no solution in google map api v3
any way you also can manage this with jQuery too