I'm using the Google Maps API on Google Maps.
The thing is that, It shows me several stations throughout the path, labeling them as A-B-C-D...Z, but I need to change it as 1-2-3-4-..99,
Here is my code;
directionsService.route({
origin: $( "#input-directions-start-point" ).val(),
destination: $( "#input-directions-end-point" ).val(),
waypoints: waypts, //other duration points
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
console.log(response);
} else {
vts.alertDialog( window.localization.error,
window.localization.error_direction_calculate + ": " + status,
BootstrapDialog.TYPE_DANGER);
}
});
Here is the Screen Shot;
Thanks in Advance
I'm using the Google Maps API on Google Maps.
The thing is that, It shows me several stations throughout the path, labeling them as A-B-C-D...Z, but I need to change it as 1-2-3-4-..99,
Here is my code;
directionsService.route({
origin: $( "#input-directions-start-point" ).val(),
destination: $( "#input-directions-end-point" ).val(),
waypoints: waypts, //other duration points
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
console.log(response);
} else {
vts.alertDialog( window.localization.error,
window.localization.error_direction_calculate + ": " + status,
BootstrapDialog.TYPE_DANGER);
}
});
Here is the Screen Shot;
Thanks in Advance
Share Improve this question edited Jun 14, 2016 at 9:35 duncan 31.9k15 gold badges81 silver badges101 bronze badges asked Jun 14, 2016 at 9:22 NewPHPerNewPHPer 2377 silver badges22 bronze badges 3- 1 And what have you tried? Your code doesn't show an attempt to replace the default markers. – MrUpsidown Commented Jun 14, 2016 at 10:12
- I dont have any idea to solve. API does not support the feature – NewPHPer Commented Jun 14, 2016 at 10:37
-
1
The
DirectionsRendererOptionshas asuppressMarkersproperty. See developers.google./maps/documentation/javascript/…. If you have your different waypoints coordinates, I suppose you could place your own markers instead of the default ones. – MrUpsidown Commented Jun 14, 2016 at 11:42
1 Answer
Reset to default 6google.maps.DirectionsRendererOptions has property suppressMarkers which when you set to true, will only render the path but not markers.
You can then render the markers yourself using for example google.maps.Marker, which has label attribute using which you can specify the label inside the marker, which can be for example a number (You can also create your own very custom marker by extending google.maps.OverlayView class, or use RichMarker library). The position of the markers on route can be parsed from response object of directionsService.
More in docs.
Working example:
function init(){
directionsService = new google.maps.DirectionsService();
var pos = new google.maps.LatLng(41.218624, -73.748358);
var myOptions = {
zoom: 15,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer({map: map, suppressMarkers: true});
directionsService.route({
origin: "New York",
destination: "Chicago",
waypoints: [{location:"Philadelphia"}, {location:"Boston"}], //other duration points
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var my_route = response.routes[0];
for (var i = 0; i < my_route.legs.length; i++) {
var marker = new google.maps.Marker({
position: my_route.legs[i].start_location,
label: ""+(i+1),
map: map
});
}
var marker = new google.maps.Marker({
position: my_route.legs[i-1].end_location,
label: ""+(i+1),
map: map
});
} else {
vts.alertDialog( window.localization.error,
window.localization.error_direction_calculate + ": " + status,
BootstrapDialog.TYPE_DANGER);
}
});
} <script type="text/javascript" src="http://www.google./jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" onload="init()">
<div id="map" style="height:400px; width:500px;"></div>
</body>