javascript - How to replace A and B markers in Google Map Api

Question

I'm using

google.maps.DirectionsRenderer({suppressMarkers: true})

to remove markers in Route. But this also removes waypoints markers in that route. So how to replace/remove 'A' and 'B' markers in a route?

Answer 1

Here is an example that replaces all the markers with custom markers.

Here is an example that just replaces the start and end markers with custom markers.

The custom directions renderer (renders the directions as native polylines and markers):

function RenderCustomDirections(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
     waypts = [];
     var bounds = new google.maps.LatLngBounds();
     var route = response.routes[0];
     var summaryPanel = document.getElementById("directions_panel");
     var detailsPanel = document.getElementById("direction_details");
     startLocation = new Object();
     endLocation = new Object();

     summaryPanel.innerHTML = "";
     detailsPanel.innerHTML = '<ul>';

     // For each route, display summary information.
     for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
     }
     var path = response.routes[0].overview_path;
     var legs = response.routes[0].legs;
     for (i=0;i<legs.length;i++) {
       if (i == 0) { 
         startLocation.latlng = legs[i].start_location;
         startLocation.address = legs[i].start_address;
         startLocation.marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
       } else { 
         waypts[i] = new Object();
         waypts[i].latlng = legs[i].start_location;
         waypts[i].address = legs[i].start_address;
         waypts[i].marker = createMarker(legs[i].start_location,"waypoint"+i,legs[i].start_address,"yellow");
       }
       endLocation.latlng = legs[i].end_location;
       endLocation.address = legs[i].end_address;
       var steps = legs[i].steps;
       for (j=0;j<steps.length;j++) {
         var nextSegment = steps[j].path;
            for (k=0;k<nextSegment.length;k++) {
              polyline.getPath().push(nextSegment[k]);
              bounds.extend(nextSegment[k]);
            }
          }
        }
        detailsPanel.innerHTML += "</ul>"
        polyline.setMap(map);
        map.fitBounds(bounds);
        endLocation.marker = createMarker(endLocation.latlng,"end",endLocation.address,"red");
        // == create the initial sidebar ==
        makeSidebar();
  } else alert(status);
}

The createMarker function:

function createMarker(latlng, label, html, color) {
   var contentString = '<b>'+label+'</b><br>'+html;
   var marker = new google.maps.Marker({
        position: latlng,
        draggable: true, 
        map: map,
        icon: getMarkerImage(color),
        shape: iconShape,
        title: label,
        zIndex: Math.round(latlng.lat()*-100000)<<5
   });
   marker.myname = label;
   gmarkers.push(marker);

   google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
   return marker;
}

custom icon function:

function getMarkerImage(iconColor) {
   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
      iconColor = "red"; 
   }
   if (!icons[iconColor]) {
      icons[iconColor] = {
        url: "mapIcons/marker_"+ iconColor +".png",
        // This marker is 20 pixels wide by 34 pixels tall.
        size: new google.maps.Size(20, 34),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0,0),
        // The anchor for this image is at 6,20.
        anchor: new google.maps.Point(9, 34));
   } 
   return icons[iconColor];
}