We Keep Coding

Google Direction Service - Route from current location to defined destination [duplicate]

This question already has an answer here:
Get directions to predefined destination from current location (Geolocation)
(1 answer)
Closed 5 years ago.
This is my script which currently displays a route for either car or transit depending on what the user has selected.
Would anyone know how to adapt this script to set the origin as the users current location and route from that to set lat + long destination.
As I have currently been unable to find a way to integrate this within my script - any help would be much appreciated!
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: *VALUE*, lng: *VALUE*}
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
calculateAndDisplayRoute(directionsService, directionsDisplay);
document.getElementById('mode').addEventListener('change', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var selectedMode = document.getElementById('mode').value;
directionsService.route({
origin: {lat: *VALUE*, lng: *VALUE*}, // Haight.
destination: {lat: *VALUE*,lng: *VALUE*}, // Ocean Beach.
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode[selectedMode],
transitOptions: {
arrivalTime: new Date(1489242600000),
routingPreference: 'FEWER_TRANSFERS'
},
unitSystem: google.maps.UnitSystem.IMPERIAL,
provideRouteAlternatives: true
}, function(response, status) {
if (status == 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}

In the google directions API you can read what parameters you can add. In your case you would need origin and destination and maybe waypoints if you are planning to make a route with multiple stops.
https://developers.google.com/maps/documentation/directions/intro#Waypoints
In the link below there is an example how you can select multiple way points. For the location you can use Geolocation to get the latitude and longitude. Those can be implemented in the calculateAndDisplay function in the origin parameter.
directionsService.route({
origin: //here you can put lat/long or a name
destination: //here you can put lat/long or a name
waypoints: // waypoints expect an Array of locations or lat/long
optimizeWaypoints: true,
travelMode: 'DRIVING'
},
https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints

Google Maps API Intel XDK Waypoints

For a school project I have to make an app, using Intel XDK, jQuery Mobile and an API. I wanted to make an app in which you can make a route and display this route on a google-maps-map (like a travelapp to view your trips).
I used Intel XDK (HTML5 + Cordova and the App Designer) and got an API key from the Google Maps Javascript API.
Right now, I have used the Google Maps API and displaying a route from A to B went well. In the following code (this is in my script) I tried to add waypoints to my route. In my HTML code I have three text-inputs for the user (start, via (=waypoint), end), the map and a button to show the route. I have looked at many sample codes, but my code doesn't work and I don't know why. There is no error, but if you push the showbutton, nothing happens. What have I done wrong or what did I miss?
I hope anyone can help and thanks in advance!
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initMap() {
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
// set direction render options
//var rendererOptions = { draggable: true };
directionsDisplay = new google.maps.DirectionsRenderer({map: map});
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
// add the map to the map placeholder
var map = new google.maps.Map(document.getElementById("gmap"),myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = $('#start-input').val();
var via = $('#via-input').val();
var end = $('#end-input').val();
var waypts = [];
waypts.push({
location: via,
stopover: true
});
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
unitSystem: google.maps.UnitSystem.IMPERIAL,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert('Directions request failed due to ' + status);
}
});
}
function createMarker(latlng) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
/* button #show-btn */
$(document).on("click", "#show-btn", function(evt) {
initMap();
createMarker(start);
createMarker(via);
createMarker(end);
return false;
});

You're creating the variables start, via and end as local variables in your calcRoute function, meaning they're not available to any code outside of that function. So when you try and refer to them in these lines, they'll be undefined, and I suspect you're getting a JS error:
createMarker(start);
createMarker(via);
createMarker(end);
Make them global variables instead; define them at the same time as you do this:
var directionDisplay;
i.e. that becomes:
var directionDisplay, start, via, end;
And then remove the var keyword from where you refer to them in the calcRoute function, i.e. do:
function calcRoute() {
start = $('#start-input').val();
via = $('#via-input').val();
end = $('#end-input').val();
You also have the same problem with your map variable. You create that as a local variable in your initMap function, and then try and refer to it in the createMarker function, which won't have access to it. Make that a global variable too.

Google Places JS API weekday_text

Does anyone know why my "nearbySearch" google place search is missing data?
When I do a nearby search using the places API, every weekday_text array returns as empty but when I do a "getDetails" request to one of the locations in the initial search, the weekday_text is returned.
http://codepen.io/anon/pen/RGBVJR
var map;
var service;
// Nearby search
var showPosition = function() {
var geolocation = new google.maps.LatLng(51.5074, -0.1278);
map = new google.maps.Map(document.getElementById('map'), {
center: geolocation,
zoom: 15
});
var request = {
location: geolocation,
radius: '500',
types: ['bar']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
};
showPosition();
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
console.log(results);
}
}
// Direct location check
function altTest() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(51.5074, -0.1278),
zoom: 15
});
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'ChIJ78fbAc8EdkgRWG1dhffz9AY'
}, function (place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(place.opening_hours.weekday_text);
}
});
}
altTest();
<div id="map">
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
Please see the console.logs to see the data discrepancy.
Any ideas why this is the case? I would rather not have to do a second API request to retrieve the weekday requests.
Thanks,
Tom

nearbySearch returns an array of PlaceResult objects.
As you can see here, PlaceResult doesn't have weekday_text property.

Remove rendered direction routes on google map

I try to render direction route on google map and my issue was, when I am try to get another direction route previously rendered route not clear. I want to know how I reset rendered route on the map.
Here my code.
function direction(dest, lat, lng) {
$('#direction').slideUp();
$('#results').slideDown();
$('#dest-direction').val(dest);
$('#direction-form').submit(function () {
var ori = $('#origin-direction').val();
map.setZoom(7);
var currentLatLng = new google.maps.LatLng(lat, lng);
map.setCenter(currentLatLng);
var directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
directionsRenderer.setPanel(document.getElementById('direction'));
var directionsService = new google.maps.DirectionsService();
/////////////////////
default_unit_system = google.maps.UnitSystem.METRIC;
if (current_unit == "km") {
default_unit_system = google.maps.UnitSystem.METRIC;
} else if (current_unit == "miles") {
default_unit_system = google.maps.UnitSystem.IMPERIAL;
}
/////////////////////
var request = {
origin: ori,
destination: lat+','+lng,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: default_unit_system
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(response);
} else {
//alert('Error: ' + status);
$('#direction').append('<table width="100%"><tr><td>Direction not found. Please try again.</td></tr></table>');
}
});
$('#direction-form').nextAll().remove();
return false;
});
}

I agree with Dr.Molle .
Still, One thing that can be useful for many overlays (like markers, like infowindows, ...): Store the objects in an array;
if needed, keep that array on the global scope;
then you can easily remove them from the map.
var renderObjects = [];
function clearRenderObjects() {
for(var i in renderObjects) {
renderObjects[i].setMap(null);
}
}
$('#direction-form').submit(function () {
// clear previous
clearRenderObjects();
...
var directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
// add to the array
renderObjects.push(directionsRenderer);
...
});

Use the same DirectionsRenderer-instance for all requests(currently you create a new instance on each request)

Google Maps API, Setting a name of marker when getting directions

I have a program that allows the user to select multiple items for a trip. Part of the program maps the items in google maps. I am using the lat/long coordinates to generate the waypoints and then the API takes it from there. The final map shows the route and markers. I would like to give each marker a custom name instead of the default street address currently being displayed. Is this possible?
//Display the route on the map
$.post("processors/getMapWayPoints.php",{
tripID: tripID
}, function(e){
console.log("Return is " + e);
latlong = JSON.parse(e);
//iterate through each locations lat/long and add it to the mappoints array for the route plotting
for(var i = 0; i < latlong.length; i+=3){
var name = latlong[i];
var lat = latlong[i+1];
var lng = latlong[i+2];
//create google lat/long point object
var pt = new google.maps.LatLng(lat, lng);
//add the location to the array for the route
mappoints.push({location:pt, stopover:true});
//not being used yet
pointNames.push(name);
}
var mapOptions = {
zoom:11,
center: home
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
directionsDisplay.setMap(map);
var request = {
origin:home,
destination:home,
waypoints: mappoints,
//optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
});