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

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