How can we replace A,B,C .. to 1 ,2,3.. in waypoints Google map API?

Question

We need some help. We have below Google Map code which is working fine. Only thing is we need to customise the text in waypoints to integer.Will it be possible? This is how we want : http://screencast.com/t/TKFOAB7UQ

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps API</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?     sensor=false&libraries=places"></script>
</head> 
<body style="font-family: Arial; font-size: 12px;"> 
<div style="width: 100%">
<div id="map-canvas" style="width: 950px; height: 400px; float: left;"></div> 
<div id="panel" style="width: 300px; float: left;"></div> 
</div>


<script type="text/javascript"> 
function initialize() {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

 var map = new google.maps.Map(document.getElementById('map-canvas'), {
 zoom:7,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: [ {  featureType:'water',  stylers:[{color:'#46bcec'},{visibility:'on'}] },{         featureType:'landscape',  stylers:[{color:'#f2f2f2'}] },{  featureType:'road',  stylers:        [{saturation:-100},{lightness:45}] },{  featureType:'road.highway',  stylers:    [{visibility:'simplified'}] },{  featureType:'road.arterial',  elementType:'labels.icon',  stylers:   [{visibility:'off'}] },{  featureType:'administrative',  elementType:'labels.text.fill',  stylers:   [{color:'#444444'}] },{  featureType:'transit',  stylers:[{visibility:'off'}] },{  featureType:'poi',   stylers:[{visibility:'off'}] }],
   });

directionsDisplay.setMap(map);
// directionsDisplay.setPanel(document.getElementById('panel'));

   var waypts   = [{location:new google.maps.LatLng(1.33202, 103.67673), stopover:true},                   {     location:new google.maps.LatLng(1.29418, 103.84943), stopover:true}];
    var request = {
    origin: new google.maps.LatLng(1.25675, 103.82033), 
   destination: new google.maps.LatLng(1.28627, 103.85927),
    waypoints: waypts,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

  directionsService.route(request, function(response, status) {
     if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response); 

  }
 });


 }


 initialize();
  </script> 
</body> 
</html>

score 3 · Accepted Answer · answered Nov 06 '14 at 10:53

What you can do, is not display the markers with letters and make your own.

Here is an example. Look at my - line 4: suppressMarkers : true - line 40: here you can also change the color of the icon. Look at the link for more info.

function initialize() {
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers : true
  });
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [ { featureType:'water', stylers:[{color:'#46bcec'},{visibility:'on'}] },{ featureType:'landscape', stylers:[{color:'#f2f2f2'}] },{ featureType:'road', stylers: [{saturation:-100},{lightness:45}] },{ featureType:'road.highway', stylers: [{visibility:'simplified'}] },{ featureType:'road.arterial', elementType:'labels.icon', stylers: [{visibility:'off'}] },{ featureType:'administrative', elementType:'labels.text.fill', stylers: [{color:'#444444'}] },{ featureType:'transit', stylers:[{visibility:'off'}] },{ featureType:'poi', stylers:[{visibility:'off'}] }],
  });
  directionsDisplay.setMap(map);
  // directionsDisplay.setPanel(document.getElementById('panel'));
  var waypts   = [
    {location:new google.maps.LatLng(1.33202, 103.67673), stopover:true}, 
    {location:new google.maps.LatLng(1.29418, 103.84943), stopover:true}
  ];
  var request = {
    origin: new google.maps.LatLng(1.25675, 103.82033), 
    destination: new google.maps.LatLng(1.28627, 103.85927),
    waypoints: waypts,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var markerCounter = 1;
      directionsDisplay.setDirections(response);
      // add custom markers
      var route = response.routes[0];
        // start marker
      addMarker(route.legs[0].start_location, markerCounter++);
        // the rest
      for (var i = 0; i < route.legs.length; i++) {
        addMarker(route.legs[i].end_location, markerCounter++);
      }
    }
  });
  function addMarker(position, i) {
    return new google.maps.Marker({
      // @see http://stackoverflow.com/questions/2436484/how-can-i-create-numbered-map-markers-in-google-maps-v3 for numbered icons
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + i + '|FF0000|000000',
      position: position,
      map: map
    })
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

How can we replace A,B,C .. to 1 ,2,3.. in waypoints Google map API?

1 Answers1