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

The DirectionRender takes an option called markerOptions. Quoting from the API docs:

All markers rendered by the DirectionsRenderer will use these options.

So, if you want to set the markers use MarkerImage (as philar has indicated).

Your other option is to pass suppressMarkers: true to the DirectionRender's options and then simply use your own markers.

Answer 2

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!

Answer 3

this is how you need to approach it

Declare all your image icons as shown below

var movingIcon = new google.maps.MarkerImage('/img/icon_moving.jpg');
var startIcon = new google.maps.MarkerImage('/img/icon_start.png');

Then while creating the marker, use the icon option to set the specific image to that marker

marker = new google.maps.Marker({
            position: point,
            map: map,
            icon: movingIcon
            });