I am drawing a route for two points using Google Maps API but I have some inconvenient from this drawing. When I draw the route, Google it shows me on map two points, A and B, the origin and destination point.
The problem is that I can't take it out. I need to show only the route without this markers.
Have someone known how to show only the route?
The code is based on example from developers guide
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service (plex)</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var startLatLng;
var endLatLng;
var startAddr = 'Grand Central Station';
var endAddr = 'City Hall';
function initMap() {
// Create a map and center it on Manhattan.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 40.771, lng: -73.974}
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
calculateAndDisplayRoute(directionsDisplay, directionsService);
}
function calculateAndDisplayRoute(directionsDisplay, directionsService) {
// Retrieve the start and end locations and create a DirectionsRequest using DRIVING directions.
directionsService.route({
origin: startAddr,
destination: endAddr,
travelMode: 'DRIVING'
}, function(response, status) {
// Route the directions and pass the response to a function to create markers for each step.
if (status === 'OK') {
directionsDisplay.setDirections(response);
console.log(response);
} else {
console.log('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src=";callback=initMap">
</script>
</body>
</html>
I am drawing a route for two points using Google Maps API but I have some inconvenient from this drawing. When I draw the route, Google it shows me on map two points, A and B, the origin and destination point.
The problem is that I can't take it out. I need to show only the route without this markers.
Have someone known how to show only the route?
The code is based on example from developers guide https://plnkr.co/edit/UWfKc7XGHtdbeRZkUS8X?p=preview
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service (plex)</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var startLatLng;
var endLatLng;
var startAddr = 'Grand Central Station';
var endAddr = 'City Hall';
function initMap() {
// Create a map and center it on Manhattan.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 40.771, lng: -73.974}
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
calculateAndDisplayRoute(directionsDisplay, directionsService);
}
function calculateAndDisplayRoute(directionsDisplay, directionsService) {
// Retrieve the start and end locations and create a DirectionsRequest using DRIVING directions.
directionsService.route({
origin: startAddr,
destination: endAddr,
travelMode: 'DRIVING'
}, function(response, status) {
// Route the directions and pass the response to a function to create markers for each step.
if (status === 'OK') {
directionsDisplay.setDirections(response);
console.log(response);
} else {
console.log('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis./maps/api/js?key=AIzaSyCgkOZvjHinGyRsQT7WO1R7KGmtxJJfDPE&callback=initMap">
</script>
</body>
</html>
- I am pretty sure you can provide options when initializing the map to hide markers. Otherwise have a look here: developers.google./maps/documentation/javascript/examples/… – p0rter Commented Feb 9, 2017 at 9:56
- I know how to hide/delete some markers but the problem is that I don't know where I find this two markers... – Doro Commented Feb 9, 2017 at 10:07
1 Answer
Reset to default 8I found the solution:
directionsDisplay.setOptions({suppressMarkers: true});
And here the link to the documentation where all the options are explained
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744903357a4600110.html
评论列表（0条）