Hide Google Maps Controls On Small Screens (mobiles, Etc...)
Solution 1:
You could check the browser width just after create your mapOptions
variable, and if it's smaller than 340px, you can modify it like a regular javascript object.
var width = window.innerWidth;
if(width < 340){
mapOptions.mapTypeControl = false;
delete mapOptions.mapTypeControlOptions;
}
The main problem here is the right way to take the browser width.
I would consider using $(window).width()
jQuery method.
EDIT: I wouldn't recommend using jQuery for this purpose anymore.
Check this answer out for getting the browser width.
Solution 2:
In the Google Maps Javascript API all controls are set to disappear by default if the map is smaller than 200x200px. This behaviour can be modified by explicitly setting the control to be visible - however it does not currently seem possible to modify the default size below which controls are hidden. https://developers.google.com/maps/documentation/javascript/controls
As an option, you could use a static Google map for screen width less than 340px which simply links to Google Maps if the user requires full map interaction or controls: https://developers.google.com/maps/documentation/static-maps/
Post a Comment for "Hide Google Maps Controls On Small Screens (mobiles, Etc...)"