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