I need to display a route, that consists of 1,000-2,000 (lat/lon) points.
I tried to do this, but I do not think it is a good solution to show route for so many points; please advise on best way to do it.
function calcRoute() {
var request = {
origin:new google.maps.LatLng(37, -97),
waypoints: [
{
location:new google.maps.LatLng(39, -97),
stopover:false
},{
location:new google.maps.LatLng(32, -95),
stopover:false
}],
destination:new google.maps.LatLng(37, -97),
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
Instead of passing the entire result to the DirectionsRenderer you can use the overview_path, (which is simplified), of the google.maps.DirectionsRoute object and add the polylines directly to the map, for example:
directionsService.route(request,plot);
function plot(result,status){
if (status == google.maps.DirectionsStatus.OK) {
for (var n = 0 ;n < result.routes.length ; n++ ){
addLine(result.routes[n].overview_path);
}
}
}
function addLine(path){
var line = new google.maps.Polyline ({
path: path,
map: map
});
}
Related
I encountered a problem with changing the color in react-Google Maps routes, I attach the code below
{
DirectionsService.route({
origin: new google.maps.LatLng(newProsps[0].lat, newProsps[0].lng),
destination: new google.maps.LatLng(40.95604847, -73.84254456),
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives: true,
}, (result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
if(state.bol){
state.directions = result
}
else{
return null
}
} else {
console.error(`error fetching directions ${result}`);
}
}
I don't understand how to change the color of the route during initialization
Maybe you can use this code from how to change color of route in google map api after route is build inside a route
directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "red"
}
});
directionsDisplay.setOptions({
polylineOptions: {
strokeColor: 'red'
}
});
I think this is a very simple problem. But I have not found the reason.
My code is like this:
var request = {
origin: new google.maps.LatLng(startLat, startLng),
destination: new google.maps.LatLng(targetLat, targetLng),
waypoints: stopovers,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
provideRouteAlternatives: true
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var rendererOptions = {
map: map,
suppressMarkers: true,
draggable: true
}
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsDisplay.setOptions({
polylineOptions: {
strokeColor: colors[i]
}
});
directionsDisplay.setDirections(response);
} else
console.log("error " + status);
});
When the route is displayed on the map, I can find the "point" which is used to drag the route.
But if I really drag the route, the route will recover to its original status after I release the mouse button.
Did anyone have the similar problem?
You might have a problem with the usage of : waypoints: stopovers, in your code please refer to https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests. If we had a fiddle we'd work on that, but till then please take a look at this fiddle that I created for you using and articles code taken from this article which seems to define the rendererOptions in a higher level:
var map;
var rendererOptions = {draggable: true};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
$(document).ready(function () {
//draw a map centered at Empire State Building Newyork
var latlng = new google.maps.LatLng(40.748492, -73.985496);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("divDirections"));
$("#btnGetDirections").click(function(){
calcRoute($("#txtAddress1").val(),$("#txtAddress2").val());
});
});
function calcRoute(start,end) {
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives : false
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
i've drawn a single polyline in google-map, but when tried to draw two line in single map it failed...its not showing anything on the google-map
can anyone please tell me some solution for this
SEE - http://jsfiddle.net/wLeBh/12/
My javascript is as given below
function initMap()
{
alert("entered!!!");
var routes = [{origin:'p t usha road, kozhikode',
destination:'cooperative hospital, eranjipalam, kozhikode'
},
{origin:'IIM, Kozhikode',
destination:'VELLIMADUKUNNU, KOZHIKODE'
}
];
try{
var rendererOptions = {
preserveViewport: true,
suppressMarkers:true,
routeIndex:1
};
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
//routes.each(function(route){
for (var i = 0, l = routes.length; i < l; i++) {
var obj = routes[i];
alert(obj.origin);
var request = {
origin: obj.origin,
destination: obj.destination,
travelMode: google.maps.TravelMode.DRIVING
};
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0,0),
zoom: 10,
maxZoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
}
});
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsDisplay.setMap(map);
directionsService.route(request, function(result, status) {
console.log(result);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
}catch(e){alert(e);}
}
There are some issues not related to the question:
you create a new Map-instance on each iteration
you didn't set the map-property of the Renderer
you've set the routeIndex to 1, but you get only 1 route(with the index 0)
The issue related to the question: The attempt was good, but the implementation wasn't.
You must create a new DirectionsRenderer-instance for each request(you've done it), but this instance is visible in the function-scope, so the variable will be overwritten on each iteration and when the response arrives each response will use the same DirectionsRenderer-instance(which may only render a single route).
Use a anonymous function to create the DirectionsRenderer-instances and requests:
$.each(routes,
function(i,obj){//<--anonymous function
var request = {
origin: obj.origin,
destination: obj.destination,
travelMode: google.maps.TravelMode.DRIVING
},
//directionsDisplay is only visible in the scope of this anonymous function
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
});});
Fiddle: http://jsfiddle.net/doktormolle/wLeBh/14/
Does anyone know why this is only giving me directions for n+1 routes. For example from A-B-C-D-E-F, it will give me the following routes:
A-B
B-C (empty result)
C-D
D-E (empty result)
E-F
Here's my google maps code, and I'm calling it with (inside a UIWebView):
showDirections([A, B, C, D, E], true);
var directionsService = new google.maps.DirectionsService();
function showDirections(locations, metric) {
var units = metric ? google.maps.UnitSystem.METRIC : google.maps.UnitSystem.IMPERIAL;
for (i=0; i<locations.length-1; i++) {
console.log('navigating: '+locations[i].title+' to '+locations[i+1].title);
var request = {
origin: new google.maps.LatLng(locations[i].location.lat, locations[i].location.lng),
destination: new google.maps.LatLng(locations[i+1].location.lat, locations[i+1].location.lng),
travelMode: google.maps.DirectionsTravelMode.DRIVING,
avoidHighways: !!(locations[i].avoidHighway),
unitSystem: units
};
setTimeout(function() { getDirections(request); }, 2000);
}
window.location = 'directionsstatus://LOADED';
}
function renderDirections(directions) {
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setPanel(document.getElementById('panel'));
directionsDisplay.setDirections(directions);
}
function getDirections(request) {
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderDirections(response);
} else {
alert(status);
window.location = 'directionsstatus://' + status;
}
});
}
I have a Ext.Map object that I am trying to get the google.maps.map() object from, but it's not returning a valid object, so I can't render the directions on the map.
addMaps: function(options){
directionsDisplay =new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
activeMarkers = new Array();
uconnPosition = new google.maps.LatLng(41.809929, -72.25486);
myMapPosition = new google.maps.LatLng(41.809929, -72.25486);
curBuildingPosition = new google.maps.LatLng(41.809929, -72.25486);
uconnMap = new Ext.Map({
mapOptions : {
center : new google.maps.LatLng(41.809929, -72.25486), //UConn
zoom : 16,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
plugins : [
new Ext.plugin.GMap.Tracker({
trackSuspended : true, //suspend tracking initially
highAccuracy : false,
marker : new google.maps.Marker({
position: uconnPosition,
title : 'My Current Location',
shadow: shadow,
icon : image
})
})
]
});
UConnApp.views.uconnTourMainPanel.add(uconnMap);
directionsDisplay.setMap(uconnMap.getMap()); //THIS IS WHERE I THINK THE PROBLEM IS
var org = new google.maps.LatLng(41.806501, -72.252769);
var dest = new google.maps.LatLng(41.805222,-72.254388);
var request = {
origin: org,
destination:dest,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
})
},
So the map is created without issue, but when I try to send the map object to the Google Maps directions service, it won't render to my map. I have tried both uconnMap.getMap() and uconnMap.map, but have not gotten an object back from either that the direction service renders to. Could anyone help me please?
You need to use the following code ::
UConnApp.views.uconnTourMainPanel.add(uconnMap);
directionsDisplay.setMap(uconnMap.map); // Changed this line for you…
var org = new google.maps.LatLng(41.806501, -72.252769);
var dest = new google.maps.LatLng(41.805222,-72.254388);
var request = {
origin: org,
destination:dest,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
})
Now everything works fine. I just tested it out in my app for you :)