Custom Google Map markers on Directions API

Question

I'm totally new to the Google maps api, and after putting together several examples found around the web, I'm struggling on the last hurdle of adding custom markers to the directions. Here's my code:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
    var latlng = new google.maps.LatLng([[showMapLatitude]],[[showMapLongitude]]);
    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
    var myOptions = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

var stylez = [
{
  featureType: "all",
  elementType: "all",
  stylers: [
    { saturation: -100 }
  ]
}
];


var image = new google.maps.MarkerImage('/icon.png',
    new google.maps.Size(20, 33),
    new google.maps.Point(0,0),
    new google.maps.Point(10,33)
);

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });
            map.mapTypes.set('tehgrayz', mapType);
            map.setMapTypeId('tehgrayz');    
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title:"[[*pagetitle]]",
                    icon: image
    });

}



function calcRoute() {
            $(".storeDetails").hide();
            $(".storeAdress").hide();
            $(".backtocontact").show();
    var start = document.getElementById("routeStart").value;
    var end = "[[showMapLatitude]],[[showMapLongitude]]";
    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);
        }
    });
}

There's an example of how to do it here: Change individual markers in google maps directions api V3

But being a noob, I can't seem to drop that in the right place here, it either errors or does nothing.

possible duplicate http://stackoverflow.com/questions/13083639/google-maps-v3-waypoints-infowindow-with-random-text — geocodezip, Oct 26 '12 at 12:57

score 1 · Answer 1 · answered Oct 26 '12 at 11:53

Change

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }
});

To

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var leg = response.routes[ 0 ].legs[ 0 ];
        makeMarker( leg.start_location, icons.start, "title" );
        makeMarker( leg.end_location, icons.end, 'title' );
    }
});

And don't forget to add makeMarker() function. Also you will need both start and end icons

Thanks for the help David, however the client invariably changed their mind, and now wants the standard markers on the directions. There's a new bug however, in that the original custom marker is still visible after loading in directions. Any idea how I'd go about hiding it on directions load? — user1226247, Nov 08 '12 at 15:16

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

In reply to comment in my other answer

To remove original custom marker and show default marker

Delete

var image = new google.maps.MarkerImage('/icon.png',
new google.maps.Size(20, 33),
new google.maps.Point(0,0),
new google.maps.Point(10,33)
);

and

var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
    title:"[[*pagetitle]]",
                icon: image
});

Also change

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});

To

directionsDisplay = new google.maps.DirectionsRenderer();

edited May 23 '17 at 12:03

Community

1
1

answered Nov 08 '12 at 15:43

david strachan

6,992
2
21
33

Thanks for responding again David, really appreciated, but I meant on directionsDisplay, hide the original custom marker (the image var), leaving the standard Google direction markers. I've tried setting marker.map to null within the calcRoute function, but it can't find the marker var, even if I set it outside of the initialize function (which would make it global, unless I'm mistaken?). – user1226247 Nov 09 '12 at 11:13
You don't require a Marker Google supplies it. You need to removesupressMarkers as in answer. – david strachan Nov 09 '12 at 13:28
Sorry I'm not explaining myself. The map I have so far, shows location, with a custom marker (which the client wants), and an input box which when fired off, makes directions from the address entered, to that custom marker. When this happens, Google drops in the standard direction markers, but the custom marker is still visible as well, at a slightly different location. The client wants to lose the custom marker ONLY after the directions are displayed. Hope that makes sense. I've since removed suppress markers by the way. – user1226247 Nov 11 '12 at 19:33
To remove markers you need to push marker into array see `http://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers` In `function calcRoute() { // First, remove any existing markers from the map. for (i = 0; i < markerArray.length; i++) { markerArray[i].setMap(null); } // Now, clear the array itself. markerArray = [];` – david strachan Nov 11 '12 at 20:58

Custom Google Map markers on Directions API

2 Answers2