Custom and waypoint markers in Google Maps
Question
I'm looking for some help. I have below Google Map code which is working fine. Only thing I need is a custom marker on the starting point: (51.943382, 6.463116) and no markers on the waypoints. Can this be done? I have tried several solutions from Stackoverflow, but my understanding of GMs code and programming skills are not sufficient enough to get what I want. Thanks!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({
});
var myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var waypts = [];
stop = new google.maps.LatLng(51.943571, 6.463856)
waypts.push({
location:stop,
stopover:true});
stop = new google.maps.LatLng(51.945032, 6.465776)
waypts.push({
location:stop,
stopover:true});
stop = new google.maps.LatLng(51.945538, 6.469413)
waypts.push({
location:stop,
stopover:true});
stop = new google.maps.LatLng(51.947462, 6.467941)
waypts.push({
location:stop,
stopover:true});
stop = new google.maps.LatLng(51.945409, 6.465562)
waypts.push({
location:stop,
stopover:true});
stop = new google.maps.LatLng(51.943700, 6.462096)
waypts.push({
location:stop,
stopover:true});
start = new google.maps.LatLng(51.943382, 6.463116);
end = new google.maps.LatLng(51.943382, 6.463116);
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
}
});
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width:70%;height:80%;"></div>
</body>
</html>
2 answers
solution1
6 ACCPTED 2014-03-25 15:52:26
I see only one solution to achieve that. Use the below code to remove all markers:
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
And manually add a marker at your start point.
Here is a JSFiddle to illustrate.
Hope this helps!
solution2
0 2014-03-25 15:52:27
Just add your own marker independent of the directions.
var marker = new google.maps.Marker({
position: start,
map: map
});
This is assuming you're adding this to your initialize function, in order to access the map. Otherwise you'd need to make your map variable global so it can be accessed in your calcRoute function.
And in your directionsDisplay object, set suppressMarkers to true:
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers : true
});
See https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.