33

I'm looking to change the marker icons when using the DirectionsRender within a google map. I've figured out from here how to change both the markers to the same icon, but I am looking for custom icons on both the start and end points. Any ideas?

Edit: I'm looking for how to assign separate icons to the start and end markers. I know how to change it for both, but having different marker icons is proving difficult.

Community
  • 1
  • 1
Corey Hart
  • 10,316
  • 9
  • 41
  • 47

2 Answers2

73

For those that need an example like I did, here's a basic one:

 // Map and directions objects
 var map = new google.maps.Map( element, options );
 var service = new google.maps.DirectionsService();
 var directions = new google.maps.DirectionsRenderer({suppressMarkers: true});

 // Start/Finish icons
 var icons = {
  start: new google.maps.MarkerImage(
   // URL
   'start.png',
   // (width,height)
   new google.maps.Size( 44, 32 ),
   // The origin point (x,y)
   new google.maps.Point( 0, 0 ),
   // The anchor point (x,y)
   new google.maps.Point( 22, 32 )
  ),
  end: new google.maps.MarkerImage(
   // URL
   'end.png',
   // (width,height)
   new google.maps.Size( 44, 32 ),
   // The origin point (x,y)
   new google.maps.Point( 0, 0 ),
   // The anchor point (x,y)
   new google.maps.Point( 22, 32 )
  )
 };

service.route( { origin: origin, destination: destination }, function( response, status ) {
 if ( status == google.maps.DirectionsStatus.OK ) {
  display.setDirections( response );
  var leg = response.routes[ 0 ].legs[ 0 ];
  makeMarker( leg.start_location, icons.start, "title" );
  makeMarker( leg.end_location, icons.end, 'title' );
 }
});
function makeMarker( position, icon, title ) {
 new google.maps.Marker({
  position: position,
  map: map,
  icon: icon,
  title: title
 });
}

The response from a route request returns a leg(s) depending on the number of stops on your route. I am only doing a A to B route, so just take the first leg, and get the position of where the markers need to go, and create markers for those spots.

Peter Theill
  • 3,117
  • 2
  • 27
  • 29
Corey Hart
  • 10,316
  • 9
  • 41
  • 47
  • 9
    What about changing the markers within the directions themselves? – Jason Jan 14 '12 at 01:18
  • I added functionallity to clear all markers before calculating directions for a 2nd time. Also see https://developers.google.com/maps/documentation/javascript/examples/marker-remove – lmeurs Dec 03 '14 at 18:51
  • how can i hide the old marker ? cause the new markers is succssefuly added, but the A and B marker showd also :(( – Oumaya Abdelkhalek Dec 15 '15 at 15:53
  • 2
    @OumayaAbdelkhalek Look at the `directions` variable. `{suppressMarkers: true}` turns off the default markers. – maiorano84 Apr 13 '16 at 21:10
  • Changing the markers in the directions panel was actually easier than expected (especially with jQuery). The image has the class `adp-marker`, so you can just set that element's src attribute to the same url as your marker's icon. If you want custom info windows, use `suppresInfoWindows: true`. Look up `adp-placemark` elements and change the click event for **its parent** to open your own info window. – plong0 Jun 04 '16 at 18:28
  • Can you make a JS Fiddle for this implementation actually i tried this code but i was unable to add label to the marker – Hassan Tariq Sep 15 '16 at 06:47
  • Why not pass map to makeMarker? – Jack Vial Sep 30 '16 at 19:12
  • The markers are not lining up perfectly with the ends of the polyline like the default markers, is it better to not suppress the default markers and instead change the markerOptions in the Directions Renderer options? – nosh Jul 24 '18 at 14:44
  • I have used the above code but in my case only show polyline not start and end icon are not show.in above code line :display.setDirections( response ); why use display var here? – Kapil Soni Feb 25 '19 at 05:33
  • I have a similar problem removing the default markers - https://stackoverflow.com/questions/76408261/how-to-display-multiple-source-and-destination-on-a-single-map-with-custom-pin-i – Dev1ce Jun 05 '23 at 16:34
12

Do as they say on that page you linked to:

  • Set the suppressMarkers option to true to prevent the default start and end markers from showing
  • Create the images for the two new markers
  • Create the markers with the position set to the start and end positions, and the icon set to the ones you created
Community
  • 1
  • 1
aniri
  • 1,831
  • 1
  • 18
  • 28