Google Maps API Tutorials. Service. Other than Google Maps Directions

Question

I use the Google Maps JS API to find nearby places, i.e. restaurants based on my LatLng:

var request = { location: myLocation, rankBy: google.maps.places.RankBy.DISTANCE, types: ['bar', 'cafe', 'food', 'liquor_store', 'lodging', 'meal_delivery', 'meal_takeaway', 'night_club', 'restaurant'], keyword: ['bar', 'pub'] }; searchService.nearbySearch(request, callback); 

I get an array of results and want to show directions to first place from the array:

 var request = { origin: myLocation, destination: bars[0].geometry.location, travelMode: google.maps.TravelMode.WALKING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); directionsDisplay.setOptions({ suppressMarkers: true }); var myRoute = response.routes[0].legs[0]; for (var i = 0; i < myRoute.steps.length; i++) { Map.marker(myRoute.steps[i].start_location, myRoute.steps[i].instructions); } } else { console.log("directionsService : " + status); } }); 

where bars[0] is an array with the results of the searchService.nearbySearch query.

I get directions, but the last “dotted leg” seems to be missing, even if the pin is installed correctly. When you compare this with maps.google.com directions, there is a dot between the pin and the direction of the route.

My API directions: http://damianbilski.com/temp/api_example.png

Maps.google.com: http://damianbilski.com/temp/online_example.png

Any idea how to get this last dotted leg using directionsService.route . Many thanks for your help!

Answer 1

The Google Maps Javascript API v3 Route Service will not do this for you (at least for the time being). You can add a “punctured” polyline from the end of the direction result to the location of the place if you want.

proof of conceptual scripts

code snippet:

 var geocoder; var map; var searchService; var myLocation; var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); myLocation = map.getCenter(); var marker = new google.maps.Marker({ position: myLocation, map: map }); searchService = new google.maps.places.PlacesService(map); directionsDisplay.setMap(map); var request = { location: myLocation, rankBy: google.maps.places.RankBy.DISTANCE, types: ['bar', 'cafe', 'food', 'liquor_store', 'lodging', 'meal_delivery', 'meal_takeaway', 'night_club', 'restaurant'], keyword: ['bar', 'pub'] }; searchService.nearbySearch(request, function(bars, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { var barMark = new google.maps.Marker({ position: bars[0].geometry.location, map: map, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(3.5, 3.5) } }); var request = { origin: myLocation, destination: bars[0].geometry.location, travelMode: google.maps.TravelMode.WALKING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); directionsDisplay.setOptions({ suppressMarkers: true, preserveViewport: true }); var polyline = getPolyline(response); map.setCenter(polyline.getPath().getAt(polyline.getPath().getLength() - 1)); map.setZoom(19); var lineLength = google.maps.geometry.spherical.computeDistanceBetween(bars[0].geometry.location, polyline.getPath().getAt(polyline.getPath().getLength() - 1)); var lineHeading = google.maps.geometry.spherical.computeHeading(bars[0].geometry.location, polyline.getPath().getAt(polyline.getPath().getLength() - 1)); var markerO = new google.maps.Marker({ position: google.maps.geometry.spherical.computeOffset(bars[0].geometry.location, lineLength * 0.1, lineHeading) }); var markerD = new google.maps.Marker({ position: google.maps.geometry.spherical.computeOffset(bars[0].geometry.location, lineLength * 0.9, lineHeading) }); var markerA = new google.maps.Marker({ position: google.maps.geometry.spherical.computeOffset(markerO.getPosition(), lineLength / 3, lineHeading - 40) }); var markerB = new google.maps.Marker({ position: google.maps.geometry.spherical.computeOffset(markerD.getPosition(), lineLength / 3, lineHeading - 140) }); var curvedLine = new GmapsCubicBezier(markerO.getPosition(), markerA.getPosition(), markerB.getPosition(), markerD.getPosition(), 0.01, map); var line = new google.maps.Polyline({ path: [bars[0].geometry.location, polyline.getPath().getAt(polyline.getPath().getLength() - 1)], strokeOpacity: 0, icons: [{ icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }, offset: '0', repeat: '20px' }], // map: map }); } else { console.log("directionsService : " + status); } }); } }); } google.maps.event.addDomListener(window, "load", initialize); function getPolyline(result) { var polyline = new google.maps.Polyline({ path: [] }); var path = result.routes[0].overview_path; var legs = result.routes[0].legs; for (i = 0; i < legs.length; i++) { var steps = legs[i].steps; for (j = 0; j < steps.length; j++) { var nextSegment = steps[j].path; for (k = 0; k < nextSegment.length; k++) { polyline.getPath().push(nextSegment[k]); } } } return polyline; } var GmapsCubicBezier = function(latlong1, latlong2, latlong3, latlong4, resolution, map) { var lat1 = latlong1.lat(); var long1 = latlong1.lng(); var lat2 = latlong2.lat(); var long2 = latlong2.lng(); var lat3 = latlong3.lat(); var long3 = latlong3.lng(); var lat4 = latlong4.lat(); var long4 = latlong4.lng(); var points = []; for (it = 0; it <= 1; it += resolution) { points.push(this.getBezier({ x: lat1, y: long1 }, { x: lat2, y: long2 }, { x: lat3, y: long3 }, { x: lat4, y: long4 }, it)); } var path = []; for (var i = 0; i < points.length - 1; i++) { path.push(new google.maps.LatLng(points[i].x, points[i].y)); path.push(new google.maps.LatLng(points[i + 1].x, points[i + 1].y, false)); } var Line = new google.maps.Polyline({ path: path, geodesic: true, strokeOpacity: 0.0, icons: [{ icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }, offset: '0', repeat: '20px' }], strokeColor: 'grey' }); Line.setMap(map); return Line; }; GmapsCubicBezier.prototype = { B1: function(t) { return t * t * t; }, B2: function(t) { return 3 * t * t * (1 - t); }, B3: function(t) { return 3 * t * (1 - t) * (1 - t); }, B4: function(t) { return (1 - t) * (1 - t) * (1 - t); }, getBezier: function(C1, C2, C3, C4, percent) { var pos = {}; pos.x = C1.x * this.B1(percent) + C2.x * this.B2(percent) + C3.x * this.B3(percent) + C4.x * this.B4(percent); pos.y = C1.y * this.B1(percent) + C2.y * this.B2(percent) + C3.y * this.B3(percent) + C4.y * this.B4(percent); return pos; } }; 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <div id="map_canvas"></div> 

Answer 2

Thanks for your answer @geocodezip if anyone needs this:

https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-dashed

 services.directions.set.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { services.directions.display.setDirections(response); var myRoute = response.routes[0].legs[0]; var lineSymbol = { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }; var line = new google.maps.Polyline({ path: [myRoute.steps[myRoute.steps.length - 1].end_point, to.geometry.location], strokeOpacity: 0, strokeColor: "#7d7d7d", icons: [{ icon: lineSymbol, offset: '0', repeat: '20px' }], map: map }); } });