CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
user1226247
user1226247

Reputation: 31

Custom Google Map markers on Directions API

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.

Upvotes: 2

Views: 13903

Answers (2)

david strachan
david strachan

Reputation: 7228

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();

Upvotes: 0

david strachan
david strachan

Reputation: 7228

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

Upvotes: 1

Related Questions