How do I change the Start and End marker image in Google Maps v3 API for Directions

Question

I have a route plotted fine on using DirectionsRender but I cannot find out how to replace the generic Google markers with my own.

I know and use this in a normal Google

Answer 1

First you need to add this on your DirectionsRenderer

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true}); 
//to hide the default icons

then after options etc...

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//you set your custom image
var image = new google.maps.MarkerImage('images/image.png',
                    new google.maps.Size(129, 42),
                    new google.maps.Point(0,0),
                    new google.maps.Point(18, 42)
                );

//you set your icon for each of the direction points Origin
                var marker1 = new google.maps.Marker({
                    position: new google.maps.LatLng(19.432651,-99.133201),
                    map: map,
                    icon: image
                });
//you set your icon for each of the direction points Destination,
                var marker2 = new google.maps.Marker({
                    position: new google.maps.LatLng(45.508648,-73.55399),
                    map: map,
                    icon: image
                });

you can also add different icons for origin and destination. Just play with the var image, it works for me!