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'
}
});
Related
I have a map inside a div with a reference #mapa
When i want to trace a route in the map the map refreshes. I want to not refresh the map i have the following code:
<div style="height: 500px; width: auto;" #mapa>
<google-map height="500px" width="100%" [zoom]="zoom" [center]="center" [options]="options" (mapClick)="click($event)">
<map-marker #markerElem *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label" [title]="marker.title" [options]="marker.options" (mapClick)="openInfo(markerElem, marker.info)" (mapDragend)="moveMap($event)">
</map-marker>
<map-info-window>{{ infoContent }}</map-info-window>
</google-map>
</div>
If i remove the div with the reference #mapa and i put it the reference into the <google-map> tag i got the title error and show the map without routes.
trazarRutaMapa() {
const directionsService = new google.maps.DirectionsService;
const directionsDisplay = new google.maps.DirectionsRenderer;
const map = new google.maps.Map(this.mapa.nativeElement, {
zoom: 7,
center: {
lat: this.markers[0].position.lat,
lng: this.markers[0].position.lng
}
});
directionsDisplay.setMap(map);
directionsDisplay.setOptions({
suppressMarkers: false,
draggable: true,
markerOptions: {
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
}
});
directionsService.route({
origin: {
lat: this.markers[0].position.lat,
lng: this.markers[0].position.lng
},
destination: {
lat: this.markers[1].position.lat,
lng: this.markers[1].position.lng
},
travelMode: google.maps.TravelMode.DRIVING,
}, (response, status) => {
if (status === google.maps.DirectionsStatus.OK) {
console.log('ESTATUS OKEY');
directionsDisplay.setDirections(response);
} else {
window.alert("Fallo el estatus" + status);
}
});
}
As far as I can see you can accomplish your goal just using the #angular/google-maps official module.
Your HTML will become something like this
<google-map [options]="options">
<map-marker *ngFor="let some of somearray" [icon]="...", [label]="...", [position]="..."></map-marker>
<map-directions-renderer [directions]="..." [options]="..."></map-directions-renderer>
</google-map>
and your trazarRoutaMapa() method will become something like this:
trazarRoutaMapa(): void {
const directionsService = new google.maps.DirectionsService; // better if injected from constructor
const request: google.maps.DirectionsRequest = {
destination: {
lat: this.markers[0].position.lat,
lng: this.markers[0].position.lng
},
origin: {
lat: this.markers[1].position.lat,
lng: this.markers[1].position.lng
},
travelMode: google.maps.TravelMode.DRIVING
};
return directionsService.route(
request,
(response, status) => {
if (status === google.maps.DirectionsStatus.OK) {
console.log('ESTATUS OKEY');
directionsDisplay.setDirections(response);
} else {
window.alert("Fallo el estatus" + status);
}
});
}
Disclaimer: I didn't test the code, just created on notepad copy/pasting :)
I have a question regarding directions service API. Is there a hybrid travel mode setting which would allow me to draw a route for a bike, even if there isn't a bike track on that particular street or it's against street rules (is it even possible).
I would like to draw a segment which will go from A to B exactly through selected road, and not around if that road
doesn't actually allow driving in that direction. It doesn't have to be correct in regard to driving rules, it must be just drawn over the street. I tried bicycle mode instead of driving mode, but there isn't any difference.
I hope my post makes any sense
Example of call:
function loadRoute0() {
var request0 = {
origin: new google.maps.LatLng(46.56300788, 15.62779705),
destination: new google.maps.LatLng(46.55953332, 15.62616729),
travelMode: google.maps.TravelMode.BICYCLING
};
directionsService.route(request0, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
var renderer = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "#00FF00"
},
suppressMarkers: true,
map: map
});
renderer.setDirections(result);
}
});
}
You could use TravelMode.WALKING, that tends to give results for one way roads and other routes that won't work for TravelMode.DRIVING.
The code in your question doesn't reproduce the picture you posted, but using TravelMode.WALKING returns a route (where TravelMode.BICYCLING gives ZERO_RESULTS for the posted code)
function loadRoute0() {
var request0 = {
origin: new google.maps.LatLng(46.56300788, 15.62779705),
destination: new google.maps.LatLng(46.55953332, 15.62616729),
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request0, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
var renderer = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "#00FF00"
},
suppressMarkers: true,
map: map
});
renderer.setDirections(result);
} else
console.log("status=" + status);
});
}
proof of concept fiddle (for the posted code)
proof of concept fiddle (for the picture)
code snippet:
var map;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"));
directionsService = new google.maps.DirectionsService();
loadRoute0();
function loadRoute0() {
var request0 = {
origin: new google.maps.LatLng(46.56300788, 15.62779705),
destination: new google.maps.LatLng(46.55953332, 15.62616729),
travelMode: google.maps.TravelMode.WALKING
};
var markerS = new google.maps.Marker({
position: request0.origin,
map: map,
label: "S"
});
var markerE = new google.maps.Marker({
position: request0.destination,
map: map,
label: "E"
});
directionsService.route(request0, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
var renderer = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "#00FF00"
},
suppressMarkers: true,
map: map
});
renderer.setDirections(result);
} else
console.log("status=" + status);
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
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 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 :)
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
});
}