Custom Markers in Distance Services are not working while using Google Maps API

Question

I am using HTML5 Geolocation API in which I map the route between client current position and the final position. I used Distance Services API which displays the route but the problem is that I am unable to change the default markers.

When I used "suppressMarkers: true" then default markers hide but none of custom markers are displaying.

Here is my js:

var icons = {
    start: new google.maps.MarkerImage(
        // URL
        'https://maps.google.com/mapfiles/kml/shapes/man.png',
        new google.maps.Size(44, 32),
        new google.maps.Point(0, 0),
        new google.maps.Point(22, 32)
    ),
    end: new google.maps.MarkerImage(
        // URL
        'https://maps.google.com/mapfiles/kml/shapes/police.png',
        new google.maps.Size(44, 32),
        new google.maps.Point(0, 0),
        new google.maps.Point(22, 32)
    )
};


function Init() {
    if (navigator.geolocation) {
        var options = {
            frequency: 3000,
            enableHighAccuracy: true,
            maximumAge: 30000,
            time: 27000
        };
        watchProcess = navigator.geolocation.watchPosition(geolocation_query, handle_errors, options);
    } else {
        alert("Geolocation services are not supported by your web browser.");
    }
}

function geolocation_query(position) {
    if (CltLatitude == null || CltLatitude == "")
        if (CltLongitude == null || CltLongitude == "") {
            CltLatitude = position.coords.latitude + (Math.random() / 10 * ((2.55 % 2) ? 1 : -1));
            CltLongitude = position.coords.longitude + (Math.random() / 10 * ((2.54 % 2) ? 1 : -1));
        }

    var currentPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var clientLoc = new google.maps.LatLng(CltLatitude, CltLongitude);

    var mapp = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: currentPos
    };
    var mapCanvas = new google.maps.Map(document.getElementById("map-canvas"), mapp);
    var rendererOptions = {
        map: mapCanvas,
        suppressMarkers: true
    };

    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

    directionsDisplay.setMap(mapCanvas);
    calculateAndDisplayRoute(directionsService, directionsDisplay, currentPos, clientLoc);

}


function calculateAndDisplayRoute(directionsService, directionsDisplay, curentLoc, clntNLocation) {

    directionsService.route({
        origin: curentLoc,
        destination: clntNLocation,
        travelMode: google.maps.TravelMode.DRIVING
    }, 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, "Start");
            makeMarker(leg.end_location, icons.end, 'End');
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}


function makeMarker(position, icon, title) {
    new google.maps.Marker({
        position: position,
        map: map,
        icon: icon,
        title: title
    });
}

google.maps.event.addDomListener(window, 'load', Init);

Tell me where I am doing mistake or missing something?

I tried a lot but none of them worked.. THanks in advance

`google.maps.MarkerImage` has been deprecated since 2012, you should use [Icon](https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon) instead — duncan, Nov 13 '15 at 11:50
Just by formatting your code for readability, I can see you've got what looks like an extra closing `}` at the end of your Init function, which might be causing you errors. — duncan, Nov 13 '15 at 11:54
@duncan i removed the extra bracket but still this problem remains.. Can u tell me how to use Marker through "Icon" ? — Zia Ul Mustafa, Nov 13 '15 at 12:07
Yes, you should suppress the markers and add your own markers afterwards. Here is an example of about the same question http://stackoverflow.com/questions/26462222/changing-titles-of-endpoint-markers-in-a-google-maps-route/26463019#26463019 — Emmanuel Delay, Nov 13 '15 at 13:04
i tried the same but i am not successfull ... Same scenario occurs — Zia Ul Mustafa, Nov 13 '15 at 13:05

Zia Ul Mustafa · Answer 1 · 2015-11-13T14:40:30.137

I found the solution. The problem was that "map" attribute was "undefined" at the marker display place. No need to set "suppressMarkers" to true. I have updated the place of "map" where it is not "undefined". Rest of the code is correct.

function geolocation_query(position) {

if (CltLatitude == null || CltLatitude == "")
    if (CltLongitude == null || CltLongitude == "") {
        CltLatitude = position.coords.latitude + (Math.random() / 10 * ((2.55 % 2) ? 1 : -1));
        CltLongitude = position.coords.longitude + (Math.random() / 10 * ((2.54 % 2) ? 1 : -1));
    }

var currentPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var clientLoc = new google.maps.LatLng(CltLatitude, CltLongitude);

var mapp = {
    zoom: 14,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: currentPos
};
var mapCanvas = new google.maps.Map(document.getElementById("map-canvas"), mapp);
var rendererOptions = {
    map: mapCanvas
 // no need to set "supress to true"
};

var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

directionsDisplay.setMap(mapCanvas);


directionsService.route({
    origin: currentPos,
    destination: clntNLoc,
    travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {

    if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        startMarker = new google.maps.Marker({
            position: currentPos,
            icon: 'https://maps.google.com/mapfiles/kml/shapes/man.png',
            map: mapCanvas,
            title: 'Start'
        });
        endMarker = new google.maps.Marker({
            position: clntNLoc,
            icon: 'https://maps.google.com/mapfiles/kml/shapes/police.png',
            map: mapCanvas,
            title: 'End'
        });
    } else {
        window.alert('Directions request failed due to ' + status);
    }
  });
  }

If any query then inform me.

One more update is that it works fine also when suppressMarkers is set to be true. I tested it — Zia Ul Mustafa, Nov 13 '15 at 14:30

score 0 · Answer 2 · answered Nov 13 '15 at 14:26

I get a javascript error with your code: Uncaught ReferenceError: map is not defined (and Uncaught ReferenceError: CltLatitude is not defined but that isn't likely the problem).

Your problem is that there is no map variable in your code (you use mapCanvas), so the makeMarker function never adds the marker to your map:

function makeMarker(position, icon, title) {
    new google.maps.Marker({
        position: position,
        map: map,
        icon: icon,
        title: title
    });
}

either pass the reference to the map into that function (you will need to pass it down the call stack):

function makeMarker(position, icon, title, map) {
    new google.maps.Marker({
        position: position,
        map: map,
        icon: icon,
        title: title
    });
}

or make the mapCanvas variable global and change the makeMarker function to use it:

function makeMarker(position, icon, title) {
    new google.maps.Marker({
        position: position,
        map: mapCanvas,
        icon: icon,
        title: title
    });
}

i answered my question and @geocodezip variable declaration is understood. I declared at my side but in question I skipped. Try my solution — Zia Ul Mustafa, Nov 13 '15 at 14:33

Custom Markers in Distance Services are not working while using Google Maps API

2 Answers2