1

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 start  = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
 icon:'http://www.google.com/mapfiles/dd-start.png',
 map: map  });

var end = new google.maps.Marker({
position: new google.maps.LatLng(lat1, long1),
icon:'http://www.google.com/mapfiles/dd-end.png',
map: map  });
var request = {
            origin: start,
                destination: end,
                optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
mobileDeveloper
  • 894
  • 2
  • 14
  • 35

4 Answers4

3

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
    });
Heitor Chang
  • 6,038
  • 2
  • 45
  • 65
2

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

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Optimized Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="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;

  function initialize() {
    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);
      } else if (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");
        }
      }
    });
  }

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

  function calcRoute() {

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

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

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

  function reset() {
    clearMarkers();
    clearWaypoints();
    directionsDisplay.setMap(null);
    directionsDisplay.setPanel(null);
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
  }
</script>
</head>
<body onload="initialize()" style="font-family: sans-serif;">
  <table style="width: 400px">

    <tr>
      <td><input type="button" value="Reset" onclick="reset()" /></td>
    </tr>
    <tr>
      <td><input type="button" value="Get Directions!" onclick="calcRoute()" /></td>
      <td></td>
    </tr>
  </table>
  <div style="position:relative; border: 1px; width: 610px; height: 400px;">
    <div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
    <div id="directionsPanel" style="position:absolute; left: 410px; width:240px; height:400px; overflow: auto"></div>

  </div>
</body>
</html>
Ramesh Kotha
  • 8,266
  • 17
  • 66
  • 90
  • This example is not what I need. I want to change the image of default icon when I click on button "get Direction" I get the same icon, the default icon of the marker in route – mobileDeveloper Apr 04 '12 at 14:39
0

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);
});
hamczu
  • 1,774
  • 12
  • 14
0

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:

new google.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

seby
  • 96
  • 1
  • 4