1

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?

2
  • More detail would be good? It sounds like you have multiple waypoints and only want to remove the first two. Do you only want the first two removed? Do you want to replace them with something?
    – geocodezip
    Jul 27, 2012 at 10:40
  • I want the two markers to be replaced with my custom markers
    – Asraf
    Jul 27, 2012 at 11:27

1 Answer 1

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.