Change default markers for directions on google maps

Posted by Elaine Marley on Stack Overflow See other posts from Stack Overflow or by Elaine Marley
Published on 2011-06-27T14:49:30Z Indexed on 2012/03/20 17:29 UTC
Read the original article Hit count: 295

Filed under:
|

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)

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about google-maps