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, 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);
}
});
});

How to read polyline lat/long from directions?

I am trying to convert my v2 Google Maps code to v3 and I'm having problems getting the polyline from directions. Basically I am trying to get the lat/long all along the path at specific interval (every 100 miles or so). In the past I used getPolyline and getVertexCount. I would then divide the VertexCount by number of miles and get an approximate number in the polyline that I should be looking at. I know with v3 both of those commands are gone. I've used the below code to get the polyline but I'm unsure that I'm getting anything because when I run an alert I get [object Object].
var map;
var gdir;
var poly;
var tempstr;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var rendererOptions = {
draggable: true
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(37.0, -107.0)
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions'));
poly = new google.maps.Polyline;
setDirections("Colorado Springs", "Phoenix");
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
var thispathlatlong;
thispathlatlong = poly.getPath();
alert(thispathlatlong);
});
}
function setDirections(fromAddress, toAddress) {
tempstr = {
origin:fromAddress,
destination:toAddress,
provideRouteAlternatives: false,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL
};
directionsService.route(tempstr, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
It draws the directions but I can't get the lat long from the array. I know it's now in a MVCarray but I don't know how to use that. I can't read it.
This is my site http://www.orbitalspeeds.com/
To be specific, I am trying to get the directions polyline that Google creates when plotting a route. Most of the help I've found is about making a polyline; I want to grab the one that Google Maps creates and parse the lat/longs into an javascript array that I can use later.
Thanks for any help.

javascript/google maps: convert location object to string

I am trying to find out how to convert the following object from using the google location api into a string
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
The above pulls your location. However, I can't figure out a way to see what it is as a string so that I can work with it. When I alert it, I get undefined and I've tried usual suspect properties and they don't display. I need to find out what it is so I can feed it into the directions service which takes "Boston" or lat lon or similar string an input.

Please refer the below link.
http://jsfiddle.net/y829C/1/
Here you can enter zip code and get the latitude and longitude.
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': addresscity }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
var myLatlng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Center on a country by name in Google Maps API v3

Would someone tell me how to center on a country by name on the Google Maps API v3? I know how to do it in v2, but need to do it in v3.

You could use Geocoding to lookup the Lat/Lng of the country. Take a look at this sample from Google.
Basically you need to do something like this:
var country = "Germany";
var geocoder;
geocoder.geocode( {'address' : country}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
});
In your initialize function you'll need to set the value of the geocoder object, like this:
geocoder = new google.maps.Geocoder();
You'd need to workout what an appropriate zoom level would be, and then set that after you have centered the map.

This code working for me:
let geocoder = new google.maps.Geocoder();
let location = "England";
geocoder.geocode({ 'address': location }, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
} else {
alert("Could not find location: " + location);
}
});

The only way I know how to do it would be by having a list of the countries and their respective Lat and Lng, with that information known you could use the following code.
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
Out of curiosity, how would you do it in v2?