0

enter image description here

Following are javascript code. i cant find where to change the default behaviour of A B C. Can you refer some example links. i googled and tried but cant find favourable output. I also checked this question but cant find result. change default icon of marker in route

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
    var combinedResults;
    var directionsResultsReturned = 0;
    function gDirRequest(service, waypoints, userFunction, waypointIndex, path) {

    // set defaults
    waypointIndex = typeof waypointIndex !== 'undefined' ? waypointIndex : 0;
    path = typeof path !== 'undefined' ? path : [];

    // get next set of waypoints

    var s = gDirGetNextSet(waypoints, waypointIndex);

    // build request object
    var startl = s[0].shift()["location"];
    var endl = s[0].pop()["location"];
    var request = {
        origin: startl,
        destination: endl,
        waypoints: s[0],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC,
        optimizeWaypoints: false,
        provideRouteAlternatives: false,
        avoidHighways: false,
        avoidTolls: false
    };


    service.route(request, function(result, status) {

        if (status == google.maps.DirectionsStatus.OK) {

            console.log(status);
            if (directionsResultsReturned == 0) { // first bunch of results in. new up the combinedResults object
                    combinedResults = result;
                    directionsResultsReturned++;
                }
                else {
                    // only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
                    // directionResults object, but enough to draw a path on the map, which is all I need
                    combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(result.routes[0].legs);
                    combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(result.routes[0].overview_path);

                    combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(result.routes[0].bounds.getNorthEast());
                    combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(result.routes[0].bounds.getSouthWest());

                    directionsResultsReturned++;
                }







            path = path.concat(result.routes[0].overview_path);

            if (s[1] != null) {
                gDirRequest(service, waypoints, userFunction, s[1], path)
            } else {
                //console.log(result);
                //response.routes[0].overview_path=path;

                directionsDisplay.setDirections(combinedResults);
                //userFunction(path);
            }

        } else {

            console.log(status);
        }

    });


}

    function gDirGetNextSet (waypoints, startIndex) {
    var MAX_WAYPOINTS_PER_REQUEST = 8;

    var w = [];    // array of waypoints to return

    if (startIndex > waypoints.length - 1) { return [w, null]; } // no more waypoints to process

    var endIndex = startIndex + MAX_WAYPOINTS_PER_REQUEST;

    // adjust waypoints, because Google allows us to include the start and destination latlongs for free!
    endIndex += 2;

    if (endIndex > waypoints.length - 1) { endIndex = waypoints.length ; }

    // get the latlongs
    for (var i = startIndex; i < endIndex; i++) {
        w.push(waypoints[i]);
    }

    if (endIndex != waypoints.length) {
        return [w, endIndex -= 1];
    } else {
        return [w, null];
    }
}


    var driver_complete_sites = <?php echo json_encode($driver_complete_sites); ?>;
    var driver_incomplete_sites = <?php echo json_encode($driver_incomplete_sites); ?>;
    var driverLat = '<?php echo $driver_last_lat; ?>';
    var driverLng = '<?php echo $driver_last_lng; ?>';
    complete_icon = '<?php echo $this -> config -> base_url();?>images/tick.png';
      incomplete_icon ='<?php echo $this -> config -> base_url();?>images/marker.png';
  driver_pos_icon ='<?php echo $this -> config -> base_url();?>images/car_marker.png';
    var directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  var centerLng = 0;
  var centerLat = 0;
    if (driver_incomplete_sites != null){
      if (driver_incomplete_sites.length>0){
        //centerLat =  driver_incomplete_sites[0].Latitude;
        //centerLng=  driver_incomplete_sites[0].Longitude;
        centerLng = -81.7170
        centerLat = 27.8333
      }
    }
    if (driver_complete_sites != null){
      if (driver_complete_sites.length>0){
        length = driver_complete_sites.length - 1;
        //centerLat =  driver_complete_sites[0].Latitude;
        //centerLng=  driver_complete_sites[0].Longitude;
        centerLng = -81.7170
        centerLat = 27.8333
        //driverLat =  driver_complete_sites[length].Latitude;
        //driverLng=  driver_complete_sites[length].Longitude;
      }
    }
    if (centerLng == 0 && centerLat == 0){
      centerLng = -81.7170
      centerLat = 27.8333
    }
    var latlngbounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
        center: new google.maps.LatLng(centerLat, centerLng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  directionsDisplay.setMap(map);

    var infowindow = new google.maps.InfoWindow();
  var waypoints = [];
  var end = null;
    var marker, i;
  if (driver_complete_sites != null){
    if (driver_complete_sites.length>0){
      var skip=driver_complete_sites.length - 1;



var travelWaypoints=[];
        for (var key in driver_complete_sites) {
                         latlngbounds.extend(new google.maps.LatLng(driver_complete_sites[key].Latitude,driver_complete_sites[key].Longitude));   
                         var directionsService = new google.maps.DirectionsService();
                         if (key == skip){


                             travelWaypoints.push({location: new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude)});
                             end = new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude);
                             break;
                     }
                     else{
                         travelWaypoints.push({location: new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude)});
                     }


          /*if (key == 0){
            start = new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude);
          }else if (key == skip){
            end = new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude);
          }else{
          var address = new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude);
          if (address !== "") {
              waypoints.push({
                  location: address,
                  //title: driver_complete_sites[key].Latitude+","+driver_complete_sites[key].Longitude,
                  //icon: complete_icon,
                  stopover: true
              });
          }
          }*/
        }
        if (end != null){

          gDirRequest(directionsService, travelWaypoints, function drawGDirLine(path) {

                        //directionsDisplay.setDirections(path);
        //var line = new google.maps.Polyline({clickable:false,map:map,path:path});
    });

        }else{
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(driver_complete_sites[0].Latitude, driver_complete_sites[0].Longitude),
            map: map,
            title: driver_complete_sites[0].Latitude+","+driver_complete_sites[0].Longitude,
            icon: complete_icon
        });
        }
      latlngbounds.extend(new google.maps.LatLng(driverLat,driverLng));     
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(driverLat, driverLng),
          map: map,
          title: driverLat+","+driverLng,
          icon: driver_pos_icon
      });
    }
  }
    if (driver_incomplete_sites != null){
      if (driver_incomplete_sites.length>0){
    for (var key in driver_incomplete_sites) {
      latlngbounds.extend(new google.maps.LatLng(driver_incomplete_sites[key].Latitude,driver_incomplete_sites[key].Longitude));  
      //alert(driver_incomplete_sites[key].Longitude)
            marker = new google.maps.Marker({
            position: new google.maps.LatLng(driver_incomplete_sites[key].Latitude, driver_incomplete_sites[key].Longitude),
            map: map,
            title: driver_incomplete_sites[key].Latitude +","+ driver_incomplete_sites[key].Longitude,
            icon: incomplete_icon
          });
        }
    }
  }
  if (driver_incomplete_sites.length>0 || driver_complete_sites.length > 0){  

    map.fitBounds(latlngbounds);
  }


  </script>
Community
  • 1
  • 1
Jalil Khan
  • 184
  • 1
  • 14
  • possible duplicate of [Change individual markers in google maps directions](http://stackoverflow.com/questions/24936037/change-individual-markers-in-google-maps-directions) – geocodezip Apr 29 '15 at 15:21

1 Answers1

2

I don't think you can change them, but you can tell the API not to draw them, and then draw them with different icons yourself.

When you set up the DirectionsRenderer you have to set suppressMarkers to true:

var directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true });

You can then draw new markers:

var startMarker = new google.maps.Marker({icon: aIcon, map: map, position: startl});
var stopMarker = new google.maps.Marker({icon: bIcon, map: map, position: endl});
a h
  • 143
  • 1
  • 8