Change default markers for directions on google maps

Question

I'm a complete noob with google maps api and I started with a given script that I'm editing to what I need to do.

In this case I have a map with some points in it that come from a database. They are like this (after I get the lat/lng from the database):

 var route1 =  'from: 37.496764,-5.913379 to: 37.392587,-6.00023'; 
 var route2 = 'from: 37.392587,-6.00023 to: 37.376964,-5.990838'; 
 routes = [route1, route2];

Then my script does the following:

 for(var j = 0; j < routes.length; j++) { 
    callGDirections(j);
      document.getElementById("dbg").innerHTML += "called "+j+"<br>";
} 

And then the directions:

 function callGDirections(num) {
        directionsArray[num] = new GDirections(); 
        GEvent.addListener(directionsArray[num], "load", function() { 
          document.getElementById("dbg").innerHTML += "loaded "+num+"<br>";
          var polyline = directionsArray[num].getPolyline(); 
          polyline.setStrokeStyle({color:colors[num],weight:3,opacity: 0.7}); 
          map.addOverlay(polyline); 
          bounds.extend(polyline.getBounds().getSouthWest());
          bounds.extend(polyline.getBounds().getNorthEast());
                map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds)); 
          }); 
 // === catch Directions errors ===
 GEvent.addListener(directionsArray[num], "error", function() {
var code = directionsArray[num].getStatus().code;
var reason="Code "+code;
if (reasons[code]) {
  reason = reasons[code]
} 

alert("Failed to obtain directions, "+reason);
  });
        directionsArray[num].load(routes[num], {getPolyline:true}); 
  }

The thing is, I want to change the A and B markers that I get from google on the map to the ones for each of the points that I'm using (each has it's particular icon in the database) but I don't know how to do this.

Furthermore, what would be fantastic but I'm clueless if it's even possible is the following: when I get the directions I get something like this:

 (a) Street A
 directions
 (b) Street B

And I want

 (a) Name of first point
 directions
 (b) Name of second point (also from database)

I understand that my knowledge of the subject is very lacking and the question might be a bit vague, but I would appreciate any tip pointing me in the right direction.

EDIT: Ok, I learned a lot from the google api with this problem but I'm still far from what I need. I learned how to hide the default markers doing this:

 // Hide the route markers when signaled.
GEvent.addListener(directionsArray[num], "addoverlay", hideDirMarkers);
// Not using the directions markers so hide them.
function hideDirMarkers(){
    var numMarkers = directionsArray[num].getNumGeocodes()
    for (var i = 0; i < numMarkers; i++) {
        var marker = directionsArray[num].getMarker(i);
        if (marker != null)
            marker.hide();
        else
            alert("Marker is null");
    }
} 

And now when I create new markers doing this:

            var point = new GLatLng(lat,lng);
    var marker = createMarker(point,html);
    map.addOverlay(marker);

They appear but they are not clickable (the popup with the html won't show)

Answer 1

I was also having an issue with the markers in the directions output. There was no way to replace the markers without some extremely cumbersome js, which then had to include workarounds for the turn-by-turn directions, etc.

A simple way to do it is by css:

The A line is a table:

<table id="adp-placemark" class="adp-placemark" jstcache="0">

and B line is:

<table class="adp-placemark" jstcache="0">

So the following css will change the markers:

#adp-placemark img, .adp-placemark img {
   display:none;
}
#adp-placemark {
   font-weight: bold;
   padding: 10px 10px 10px 30px;
   background: white url(../images/map_icons/number_1.png) no-repeat left center;
}
.adp-placemark {
   font-weight: bold;
   padding: 10px 10px 10px 30px;
   background: white url(../images/map_icons/number_2.png) no-repeat left center;
}

Answer 2

I had two markers already because i used detection first. To hide the new "A" and "B" markers i used

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

Answer 3

This setting works for me for my JS project.

    new new google.maps.DirectionsRenderer(
      {
        polylineOptions: { strokeColor: "blue" },
        markerOptions: {
          icon: {
            scaledSize: new google.maps.Size(35, 35), 
            url: 'http://res.cloudinary.com/tapsy/image/upload/v1572870098/u_fzktfv.png'
          },
          animation: google.maps.Animation.DROP,
        }
      }
    );

Thanks.

Answer 4

According to the Google Maps API Document for GDirections you should be able to call getMarker to get the Marker for the Start and End Points then change the image using the setImage method on GMarker :

directionsArray[num].getMarker(0).setImage('IMAGE URL');

I don't have a Google Maps setup to test this against, but it should change the image for the start marker and if you change the index from 0 to the last marker you should be able to change the last image. Hope this helps!

Reference: NetManiac - Changing markers icons with Google Maps API

Answer 5

Change two defaults markers on direction. Code for google maps api v3.

    mapOptions = 
    center: new google.maps.LatLng(50.075538,14.437801),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP

map = new google.maps.Map($(".map_canvas").get(0), mapOptions)

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(suppressMarkers: true);
directionsDisplay.setMap(map);

request = 
    origin: $(".map_canvas").data('coords'),
    destination: '50.087349, 14.420756',
    travelMode: google.maps.TravelMode.DRIVING

directionsService.route request, (result, status) ->
    if status == google.maps.DirectionsStatus.OK
        directionsDisplay.setDirections(result)
        showSteps(result)

showSteps = (result) ->
    myRoute = result.routes[0].legs[0];

    new google.maps.Marker
        position: myRoute.steps[0].start_point,
        icon: 'http://maps.gstatic.com/intl/en_ALL/mapfiles/ms/micons/homegardenbusiness.png',
        map: map

    new google.maps.Marker
        position: myRoute.steps[myRoute.steps.length-1].start_point,
        map: map