Another Google maps question about how to remove the A and B icon in ver 2.*
I have done vast research on this topic without much success. I must point out that I am a real beginner of google maps and javascript. I am trying to remove the A and B icons that appear on google map when asking for directions.
I am in creating a customised layout for the directions from a great tutorial but I am struggling in removing the A and B symbol from the map itself. Any help will be apprecaited as I am banging my head against a brick wall.
The Code currently
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var dirn = new GDirections(map);
//var dirn = new GDirections(map).setOptions( { suppressMarkers: true } );
GEvent.addListener(dirn,"error", function() {
alert("Directions Failed: "+dirn.getStatus().code);
});
dirn.load("from: <% Response.Write homlat %>,<% Response.Write homlng %> to: "+Slat+","+Slongtit+"", {getSteps:true});
function customPanel(map,mapname,dirn,div) {
var html = "";
function waypoint(point, type, address) {
var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))" +'"';
html += '<table style="border: 3px solid silver; margin: 10px 0px; background-color: rgb(238, 238, 238); border-collapse: collapse; color: rgb(0, 0, 0);">';
html += ' <tr style="cursor: pointer;" onclick='+target+'>';
html += ' <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
html += ' <img src="http://www.google.com/intl/en_ALL/mapfiles/icon-dd-' +type+ '-trans.png">'
html += type;
html += ' <\/td>';
html += ' <td style="vertical-align: middle; width: 100%;">';
html += address;
html += ' <\/td>';
html += ' <\/tr>';
html += '<\/table>';
}
function routeDistance(开发者_开发知识库dist) {
html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '<\/div>';
}
function detail(point, num, description, dist) {
var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))" +'"';
html += '<table style="margin: 0px; padding: 0px; border-collapse: collapse;">';
html += ' <tr style="cursor: pointer;" onclick='+target+'>';
html += ' <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; text-align: right;">';
html += ' <a href="javascript:void(0)"> '+num+'. <\/a>';
html += ' <\/td>';
html += ' <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; width: 100%;">';
html += description;
html += ' <\/td>';
html += ' <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px 0.3em 0.5em; vertical-align: top; text-align: right;">';
html += dist;
html += ' <\/td>';
html += ' <\/tr>';
html += '<\/table>';
}
function copyright(text) {
html += '<div style="font-size: 0.86em;">' + text + "<\/div>";
}
for (var i=0; i<dirn.getNumRoutes(); i++) {
if (i==0) {
// var type="play";
var type="<img src='map_images/man_image.png'>";
} else {
var type="pause";
}
var route = dirn.getRoute(i);
var geocode = route.getStartGeocode();
var point = route.getStep(0).getLatLng();
waypoint(point, type, addsrch);
routeDistance(route.getDistance().html+" (about "+route.getDuration().html+")");
for (var j=0; j<route.getNumSteps(); j++) {
var step = route.getStep(j);
detail(step.getLatLng(), j+1, step.getDescriptionHtml(), step.getDistance().html);
}
}
var geocode = route.getEndGeocode();
var point = route.getEndLatLng();
waypoint(point, stopIcons[Sicon], Sbuild);
copyright(dirn.getCopyrightsHtml());
div.innerHTML = html;
}
GEvent.addListener(dirn,"load", function() {
setTimeout('customPanel(map,"map",dirn,document.getElementById("path"))', 1);
});
}
I am using Google maps API ver 2.*. Many Thanks for anyone who helps.
You don't have direct access to the markers in this case because they are automatically generated when directions are generated. You have to suppress them with a specific function called DirectionsRenderer
//existing code
var map = new GMap2(document.getElementById("map"));
var dirn = new GDirections(map);
//additional code
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.suppressMarkers = true;
精彩评论