My problem is that waypoints are highlighted in directions list like: start to waypoint 1, waypoint 1 to waypoint 2, ...
here is an example how it is looking: http://www.ridersguide.co.uk/Ride_721
I'd like to show start and instructions how to reach destination points without showing waypoints.
Do you have some idea?
you can supress the markers with these settings
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
suppressInfoWindows: true,
});
#Ramesh K's answer is generally correct. However, in this way, you also kill the marker of start point and end point. You need to create to marker by yourself then.
I think you have the defaults in the Waypoint for your api calls.
Look here for a suggestion to remove waypoints as a 'layover' in your trip
Related
is it possible to set the direction of google Maps in grayscale(black&white) mode on the website when users select stores and want to check the direction?
I have grayscale Map on my website but when the user tries to see the direction, direction detail shows in color so is there any possible way to show that direction also in black&white?
To answer your question, yes, setting the Directions polyline colors can be changed to match your grayscale map styling.
This can be done by modifying the DirectionsRendererOptions' polylineOptions.
var directionsRenderer = new google.maps.DirectionsRenderer({
suppressMarkers: true,
polylineOptions:{
strokeColor: "#808080",
strokeWeight: 10
}
});
As you can notice, I also removed the default directions marker by setting suppressMarkers to true. That way, I can create a new marker that I could modify to match the grayscale color as well.
Please find the working sample here
These are the 2 samples i want to combine together:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions
https://developers.google.com/maps/documentation/javascript/examples/directions-draggable
I am still learning and i do not know how to combine these two samples.
What i am planning to do is put an original location and destination location while showing text directions.
Please i am doing these on our school project . It would really mean a lot to me
You need to add the draggable option to the marker and the right panel in the DirectionsRenderer like so:
this.directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
Here is an example of both samples combined
I have a friend who struggles organising people working around the country for the most appropriate sites in the UK (In the telecommunications sector)
I want to make him a map of the UK where each county works as a hyperlink to a list (This is because I need it to be visual and for him to understand who lives closest to each site, this could also be great, if not better as a postcode map).
I was wondering if it was possible or even if I could find the code online to draw the correct shapes for the hyperlinks, I couldn't find anything on github or any previous questions for somebody who has tried this.
As I am a beginner it would be great if I could make these hyperlinks using HTML (It doesn't need to look pretty, it just needs to be shaped like the UK!)
It would be great to get suggestions as to how I can do this.
Thanks for you time
Google Maps API is the way to go (as mentioned by other).
The idea is that you should build a polygon for each county in the UK, assign a click event to each polygon you just created and finally redirect the user to the link that you want.
I made a JSFiddle that does it for the Avon county in the UK.
https://jsfiddle.net/mpariscl/vmysg6yh/1/
$(function() {
initialize();
});
function initialize() {
var myLatlng = new google.maps.LatLng(51.6881171980821, -2.51998453948394);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var county = new google.maps.Polygon({
paths: CountyCoordinates(),
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
county.setMap(map);
google.maps.event.addListener(county, 'click', function() {
location.href = 'https://en.wikipedia.org/wiki/Avon_(county)';
});
}
You can then add the missing counties using the coordinate that you will find on this website : http://www.nearby.org.uk/counties/
Google Maps API is the way to go here. You could combine these two examples:
Geocoding for looking up the original address
KML layer For adding the location of his employees as markers so he can see who is closest.
You can generate a KML file by creating your own map on Google Maps.
It's not really beginners stuff but due to the examples you should be able to get started.
If you want an easier solution you could just create a map on Google Maps and add location of employees there. You can share maps and that would probably be a pretty good tool to solve your friends problem.
Edit I just saw your comment about Google Maps. You can perhaps make it easier by styling the map a bit and leaving out details that might be confusing. You can use something like MapStyle for that.
I have created an application that plots waypoints onto Google Maps and then using the API I show the root and navigation to each waypoint.
But I want to style each waypoint... specifically give each one a unique title. You can do this when you add a marker, but I can not see away to do this to a waypoint.
Are there any workarounds or am I missing something?
It seems you can't style them. My solution was to disable route markers for the waypoints by setting supressMarkers: true on the google.maps.DirectionsRenderer:
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressInfoWindows: true,
suppressMarkers: true,
map: map
});
Then, loop over your waypoints and a marker for each, styled however you like.
I used markers as well as direction service in my map.
I used bounds.extend(lat),map.fitBounds(bounds);to extend the maps to show all my markers. This was working fine until i used direction service. once the direction is used, map automatically zooms to the direction from A to B.Only two markers pointing A and B are visible now in map.
But i want the map to show all the markers with the direction used between two other markers.
How could i do it?
Issue solved by using the following line
var directionsDisplay = new google.maps.DirectionsRenderer({
preserveViewport:true
});
If you don't want the directionsRenderer to zoom to its results, use the preserveViewport option.
Another option would be to use the union of the bounds of the route returned by the directionsService and the bounds you calculated for your markers.