Hi i'm wanting to create a map that, when a function is called, generates directions to a point based on the users current geolocation. I have tried to do this and so far my attepts have been fruitless, here is my current JS code:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var start = latlon;
var end = "Darwin, NSW, Australia";
var request =
{
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVIN
};
function initialize()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
function showPosition(position)
{
directionsDisplay = new google.maps.DirectionsRenderer();
var latlon = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions =
{
zoom:15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlon
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
}
}
function getdirections()
{
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}
Any Help would be greatly appreciated, but keep in mind it must use the google maps api, v3. Thank you :)
Please checkout this jsfiddle,
Here i have hard-coded the starting position and end position is the users current position.
Is this what you are looking for ?
Related
The below code shows two points in the map and draws the driving path between those points. What I'm trying to achieve is when I move a point, it should move the marker and re-draw the path. How can I do that? I appreciate any hints. Thanks.
function mapLocation() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var istanbul = new google.maps.LatLng(41.015137, 28.979530);
var mapOptions = {
zoom: 7,
center: istanbul
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = new google.maps.LatLng(41.01524, 28.975994);
//var end = new google.maps.LatLng(38.334818, -181.884886);
var end = new google.maps.LatLng(41.013232, 28.978676);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
} else {
alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();
You can set the draggable option of the DirectionsRendererOptions to true and pass it to the DirectionsRenderer to allow users to edit the rendered route(s).
directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true
});
See the documentation.
Im using below code to show a distance between two distances but zoom doesn't work it always will be in default zoom level. I tried setting lot of values but it's not working. Please help.
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var from = "";
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.preserveViewport = false;
var dallas = new google.maps.LatLng(32.8931567, -97.0402193);
var mapOptions = {
zoom: 15,
center: dallas
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
map.setZoom(map.getZoom()+5);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = 'dallas airport terminal a';
var end = 'SpringHill Suites';
console.log("HotelDetail: " + end);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
For what you want to achieve, the preserveViewport property needs to be set to true like this.
directionsDisplay = new google.maps.DirectionsRenderer({
preserveViewport: true
});
//directionsDisplay.preserveViewport = false;
In addition, your code sets a zoom level of 20 which is too high to see anything on the map. Here is a working example with an initial zoom level of 12: JSFiddle
I try to make directions for my current position and marker coordinate. so i get latitude and longitude using getcurrentposition. then, i mark it.
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var node = new google.maps.LatLng(-7.276442,112.791174);
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
directionsDisplay.setMap(map);
navigator.geolocation.getCurrentPosition(function(position) {
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
position : pos,
map: map,
title:'Lokasi Anda'
});
var marker1 = new google.maps.Marker({
position : node,
map: map,
title:'Lokasi Anda'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
}
then, I calculate it using this function.
function calcRoute() {
var request = {
origin:pos,
destination:node,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
but why i can't see direction from pos to node. any suggestion ?
If I call the calcRoute function (and pass in the "pos" and "node" locations, it can't find directions between where I am (in the US) and where the point is located (Raya Its, Sukolilo, Surabaya City, East Java 60117, Republic of Indonesia). The DirectionsService returns a status of "ZERO_RESULTS".
ZERO_RESULTS No route could be found between the origin and destination.
working example
function calcRoute(pos,node) {
var directionsService = new google.maps.DirectionsService();
var request = {
origin:pos,
destination:node,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else { alert("Directions failed: "+status); }
});
}
I'm trying to accomplish the following with the Google Maps API:
Display to_address as a marker on the map
Get users location
Generate and display directions based on the information given by gps/user input
I have gotten the last two to work just fine. The problem I am having now is showing the to_address as a marker on the map if the location is not provided.
This is the code I am using. Keep in mind the last 2 steps work as expected. I know that I can accomplish this using latlng but that is not an option for me. I need to provide it an address.
var geocoder;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var to_pos;
var to_address = '11161 84th ave delta bc';
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': to_address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
to_pos = results[0].geometry.location;
}
});
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: to_pos
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions'));
var control = document.getElementById('d_options');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var infowindow = new google.maps.Marker({
position: pos,
map: map,
title: "You"
});
map.setCenter(pos);
$('#from').val(pos);
$('#d_options').trigger('collapse');
calcRoute();
}, function () {
handleNoGeolocation(true);
});
}
}
function calcRoute() {
var start = document.getElementById('from').value;
var end = to_address;
$('#results').show();
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
geocoding uses an asynchronous request. You must create the marker inside the callback of geocode()
geocoder.geocode({
'address': to_address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var to_pos = results[0].geometry.location;
new google.maps.Marker({
position: new google.maps.LatLng(to_pos.lat(),to_pos.lng()),
map: map,
title: "Destination"
});
}
});
I am trying to panTo an area on a map on click. The script is not working and page reloading. Perhaps someone can see the problem.
My function
function clickroute(lati,long) {
map = google.maps.Map(document.getElementById("map_canvas"));
map.panTo(lati,long)
}
And the rest
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var address = 'virginia water';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
And my event
test
The issue is that your using map.panTo(latitude,longitude) but the google maps API uses this: panTo(latLng myLatLng) where latLng is a google map class.
try something like this (untested)
function clickroute(lati,long) {
var latLng = new google.maps.LatLng(lati, long); //Makes a latlng
map.panTo(latLng); //Make map global
}
Look here for more info.
EDIT
As someone else stated you don't want to remake a new map. Maybe its easier to make it global?
The panTo accepts LatLng object as parameters not just coordinates. Create a LatLng object before passing it to panTo method.
function clickroute(lati,long) {
map.panTo(new google.maps.LatLng(lati,long));
return false; //this will cancel your navigation
}
Your page reloads because you do not cancel the navigation event in onClick that you put in the anchor tag. See comment in code above.
And like the others say take out the map variable from this function and make map global.
you can also set a new marker on the fly:
var LatLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
content: "<h2>Hier wohne ich!</h2>",
map: map,position: results[0].geometry.location
});
map.panTo(LatLng);
You can do this:
var latLng = new google.maps.LatLng(lat_val, lng_value);
map.panTo(latLng);`
The line...
map = google.maps.Map(document.getElementById("map_canvas"));
.. is actually attempting to create a new Map within the #map_canvas Div. Since that map should already exist, you don't need that assignment statement. Just calling
map.panTo(lati,long)
should work?
Edit: Sorry, SSRide360 is correct that should be...
map.panTo(new google.maps.LatLng(lati, long));