Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change individual markers in google maps directions api V3

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.

like image 531
Corey Hart Avatar asked Jan 27 '11 07:01

Corey Hart


People also ask

How do you customize a marker in maps?

For adding a custom marker to Google Maps navigate to the app > res > drawable > Right-Click on it > New > Vector Assets and select the icon which we have to show on your Map. You can change the color according to our requirements. After creating this icon now we will move towards adding this marker to our Map.

How do you remove a specific marker?

Click the marker to reveal the editing options. Click the "Delete" link in the lower-left corner of the dialog box.


1 Answers

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.

like image 75
Corey Hart Avatar answered Oct 07 '22 20:10

Corey Hart