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
Related
See this map: http://imgur.com/a/r03rk
Is it possible to stop Google Maps from slanting the image like this?
If so, how?
Maybe disabling webGL would help? However, I dont think I can do this in code so it would affect all users, instead my own browser only.
Thanks.
Looking at https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map , the tilt option can be set to 0 so that the map will no longer automatically tilt (slant) when the user zooms in.
For example:
var mapOptions = {
center: mycenter,
zoom: 7,
tilt: 0
};
Unfortunately the icon to switch tilt back on (slanting the image) will still be available on the map for the user to switch on if they wish. There is no simple way to stop this icon appearing.
I am very new to this, so please forgive me if this question is stupid. I am using a custom Google Map in my website. I have 2 layers and each layer has a different type of business. I am using 2 different icons/markers selected from the standard Google Maps options to differentiate between the two types of businesses.
I would like to create a map key explaining to customers what the different markers indicate - but I cannot find these markers as images on the net, and I can't figure out how to save or download them from the map itself. So my question is: Is there a way to download and save the actual marker/icon image, so I can re-upload it elsewhere on the page and create a map key? I realize that the Google Map already has a simple key (if you know to click on it to see it) but I was hoping to create something with more text/explanation, that is more obvious to customers when the page loads.
Here is the url for the map I'm referring to: www.washingtonlavenderassociation.org/map
Thank you!
http://map-icons.com/
var marker = new Marker({
map: map,
position: new google.maps.LatLng(-27.46577, 153.02303),
icon: {
path: SQUARE_PIN,
fillColor: '#00CCBB',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0
},
map_icon_label: '<span class="map-icon map-icon-point-of-interest"></span>'
});
or from docs: https://developers.google.com/maps/documentation/javascript/examples/icon-simple
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 want to have a polyline that fades out from the current position (alpha = 1.0) to the start position (alpha = 0.0). In that way, give some kind of visual chronology to such a line.
After some googling, I concluded, that currently a gradient on a polyline is not part of Maps' feature set.
Am I right in this conclusion. I hope not, because I'm about to
Draw a complex polyline as many single lines, each with an increasing opacity. Question: is this going to blow up browsers, when my polyline consists of hundreds of points?
Thanks in advance..
So, here is something that is more than a comment, so I post it as an answer, realizing it might not be THE answer, and I don't expect anyone to honor this as such:
So, rather than drawing a polyline like this:
line = new google.maps.Polyline({
path: path,
map: map
});
I came up with this:
function multiMonolines (path) {
var totalPoints =path.length;
for(var i = 0; i < (path.length-1); ++i){
var startingPoint =path[i];
var endingPoint=path[i+1];
var shortPath=new Array(startingPoint,endingPoint);
line = new google.maps.Polyline({
path: shortPath,
---and here I do some stuff with opacity---
map: map
});
};
};
My finding is, that the map is drawn fast enough. (There are 381 'multimonolines').
However: zooming in on the map in Safari hangs the web page. Chrome is easier on that.
I realize that drawing 380 lines is quite an expensive thing to do, so I think I will have to revert to the polyline, hoping that someone has figured out how to do a gradient polyline. Or until Apple optimizes its js rendering engine even more.
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.