Change default markers for directions on google maps
- by Elaine Marley
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)
