How do I change the Start and End marker image in Google Maps v3 API for Directions

后端 未结 3 1763
渐次进展
渐次进展 2021-02-19 11:26

I have a route plotted fine on using DirectionsRender but I cannot find out how to replace the generic Google markers with my own.

I know and use this in a normal Google

相关标签:
3条回答
  • 2021-02-19 11:48

    The DirectionRender takes an option called markerOptions. Quoting from the API docs:

    All markers rendered by the DirectionsRenderer will use these options.

    So, if you want to set the markers use MarkerImage (as philar has indicated).

    Your other option is to pass suppressMarkers: true to the DirectionRender's options and then simply use your own markers.

    0 讨论(0)
  • 2021-02-19 11:48

    First you need to add this on your DirectionsRenderer

    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true}); 
    //to hide the default icons
    

    then after options etc...

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    //you set your custom image
    var image = new google.maps.MarkerImage('images/image.png',
                        new google.maps.Size(129, 42),
                        new google.maps.Point(0,0),
                        new google.maps.Point(18, 42)
                    );
    
    //you set your icon for each of the direction points Origin
                    var marker1 = new google.maps.Marker({
                        position: new google.maps.LatLng(19.432651,-99.133201),
                        map: map,
                        icon: image
                    });
    //you set your icon for each of the direction points Destination,
                    var marker2 = new google.maps.Marker({
                        position: new google.maps.LatLng(45.508648,-73.55399),
                        map: map,
                        icon: image
                    });
    

    you can also add different icons for origin and destination. Just play with the var image, it works for me!

    0 讨论(0)
  • 2021-02-19 11:49

    this is how you need to approach it

    Declare all your image icons as shown below

    var movingIcon = new google.maps.MarkerImage('/img/icon_moving.jpg');
    var startIcon = new google.maps.MarkerImage('/img/icon_start.png');
    

    Then while creating the marker, use the icon option to set the specific image to that marker

    marker = new google.maps.Marker({
                position: point,
                map: map,
                icon: movingIcon
                });
    
    0 讨论(0)
提交回复
热议问题