CODEWITHSUNDEEP
google-maps-api-3
Solver
Solver

Reputation: 169

Custom icon for Google map API v3 directions

I know how to change icon on standard google map api v3. Is there any way to change icons on map with directions?

<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize(){
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions={
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById("directionsPanel")
    );

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: 'marker/image.png',
      title: 'Click to zoom'
    });

    google.maps.event.addListener(marker, 'click', function(){
      map.setZoom(15);
      map.setCenter(marker.getPosition());
    });

    google.maps.event.addDomListener(window, 'load', initialize);
  }

  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = '-34.397, 150.644';
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>

Above code display map with my custom icon marker but when I generate directions than on top of my custom marker I see another standard green maker with letter B.

How to overide that?

Upvotes: 3

Views: 6640

Answers (1)

geocodezip
geocodezip

Reputation: 161334

What you need to do is use the suppressMarkers option of the DirectionsRenderer, that will prevent it from adding any markers.

Example with custom icons, that doesn't use the DirectionsRenderer at all, it is from before that option was available.

Upvotes: 3

Related Questions