Skip to content Skip to sidebar Skip to footer
Home / Google Maps / Javascript

Change Default Icon Of Marker In Route

Post a Comment
I want to change the default icon of marker when I search route between two locations. How can I do it? I use this code but I didn't get only the map without route and points var s

Solution 1:

When you create the renderer add this option, then place your markers at the origin (start) and destination(end)

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

Solution 2:

here is the working example, change according to your requirement.

<html><head><metaname="viewport"content="initial-scale=1.0, user-scalable=no"/><metahttp-equiv="content-type"content="text/html; charset=UTF-8"/><title>Google Maps JavaScript API v3 Example: Optimized Directions</title><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script><scripttype="text/javascript">var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null;
  var waypoints = [];
  var markers = [];
  var directionsVisible = false;

  functioninitialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(37.7749295, -122.4194155);
    var myOptions = {
      zoom:13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));

    google.maps.event.addListener(map, 'click', function(event) {
      if (origin == null) {
        origin = event.latLng;
        addMarker(origin);
      } elseif (destination == null) {
        destination = event.latLng;
        addMarker(destination);
      } else {
        if (waypoints.length < 9) {
          waypoints.push({ location: destination, stopover: true });
          destination = event.latLng;
          addMarker(destination);
        } else {
          alert("Maximum number of waypoints reached");
        }
      }
    });
  }

  functionaddMarker(latlng) {
    markers.push(new google.maps.Marker({
      position: latlng, 
      map: map,
      icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
    }));    
  }

  functioncalcRoute() {

    if (origin == null) {
      alert("Click on the map to add a start point");
      return;
    }

    if (destination == null) {
      alert("Click on the map to add an end point");
      return;
    }

    var mode = google.maps.DirectionsTravelMode.DRIVING;

    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: mode,

    };

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
      }
    });

    clearMarkers();
    directionsVisible = true;
  }

  functionclearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }

  functionclearWaypoints() {
    markers = [];
    origin = null;
    destination = null;
    waypoints = [];
    directionsVisible = false;
  }

  functionreset() {
    clearMarkers();
    clearWaypoints();
    directionsDisplay.setMap(null);
    directionsDisplay.setPanel(null);
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
  }
</script></head><bodyonload="initialize()"style="font-family: sans-serif;"><tablestyle="width: 400px"><tr><td><inputtype="button"value="Reset"onclick="reset()" /></td></tr><tr><td><inputtype="button"value="Get Directions!"onclick="calcRoute()" /></td><td></td></tr></table><divstyle="position:relative; border: 1px; width: 610px; height: 400px;"><divid="map_canvas"style="border: 1px solid black; position:absolute; width:398px; height:398px"></div><divid="directionsPanel"style="position:absolute; left: 410px; width:240px; height:400px; overflow: auto"></div></div></body></html>

Solution 3:

Ok, my try:

  1. Set visible = false and draggable = true in DirectionsRendererOptions object
  2. Create DirectionsRenderer object
  3. Create markers on your own (with draggable=true option)

  4. Pass dragstart and drag event from your marker to renderer markers (start and end)

    google.maps.event.addListener(marker_start, 'dragstart', function(e) {
    directionsRenderer.b.markers[0].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[0], 'dragstart', e);
});

google.maps.event.addListener(marker_start, 'drag', function(e) {
    directionsRenderer.b.markers[0].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[0], 'drag', e);
});

google.maps.event.addListener(marker_end, 'dragstart', function(e) {
    var l = directionsRenderer.b.markers.length - 1;
    directionsRenderer.b.markers[l].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[l], 'dragstart', e);
});

google.maps.event.addListener(marker_end, 'drag', function(e) {
    var l = directionsRenderer.b.markers.length - 1;
    directionsRenderer.b.markers[l].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[l], 'drag', e);
});

Solution 4:

You can change the icon of all markers by the next line of code:

directionsDisplay = new google.maps.DirectionsRenderer({
    markerOptions:{
        icon:"put_here_the_url_to_your_icon",
    },
});

If you want use different icon for each marker on the map, you can create each markers with its own positions and icons using Marker constructor:

newgoogle.maps.Marker({
    position: {lat: 37.753212, lng: 14.991608}, //Example
    map: map,
    icon: your_marker_image
});

(you can use your newly created markers as start, end or waypoints markers). Then pass to the DirectionRenderer constructor the current object (markerOption):

directionsDisplay = new google.maps.DirectionsRenderer({
    markerOptions:{
        visible:false,
    },
});

So the markers of the direction service are not showed.

https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRendererOptions

Post a Comment for "Change Default Icon Of Marker In Route"