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

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

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

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

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;
}