Google Map full screen option disabled? - javascript

I am using google map for my site but I can not see the full screen feauture on the map. How can I activate and why I can't see it?
I have add following option to map:
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 7,
center: new google.maps.LatLng(this.coordinates[0][1], this.coordinates[0][0]),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
scaleControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
});
Here is my map:

By default, the fullscreen control is not included on the desktop version of the Google Maps API. Add the fullscreenControl: true property to the object used to initialize the map. Your code should look like this:
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 7,
center: new google.maps.LatLng(this.coordinates[0][1], this.coordinates[0][0]),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
scaleControl: true,
fullscreenControl: true
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
});
Checkout the documentation at https://developers.google.com/maps/documentation/javascript/controls

In the google maps documentation;
"The Fullscreen control offers the option to open the map in fullscreen mode. This control is enabled by default on desktop and mobile devices. Note: iOS doesn't support the fullscreen feature. The fullscreen control is therefore not visible on iOS devices."
This comment is a bit late, but maybe it helps someone.
The article link is; Google Maps Platform
The section is; Controls Overview

Related

Google Maps pan control does not display

I have a google maps with this options :
mapProp = {
center: new google.maps.LatLng(39.92553, 32.86628),
zoom: 6,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
I want to this control :
I want to this control but not showing my map.
Or I want to journey with button on map.
Thank You.
Most likely your are using a version of Google Maps newer than 3.22.
After that version as stated in the release notes, the Pan Control is no longer available. To continue to use it you must request an earlier version.
The Pan control on the map is no longer available. To pan the view,
users click and drag, or swipe, the map. (Note that the Pan control in
Street View remains available.)
At the time of this answer we are at version 3.37and 3.22 is already retired.

Image enlarge on click and hotspots

I have a large map of the UK with multiple walking routes marked on. Currently the map is split into zones but walkers have asked to see the map as a whole so they can link routes together.
However, the routes then look very small. Is it possible to have a map with a clickable scale on one side that allows then to zoom into an area of the map. The map needs to be draggable and once zoomed in to still allow hotspotting. Is this possible?
You need to initialize the map with a init() function and pass necessary parameters that would enable controls like zoom and drag.
Add this code to your Google Map page.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
}
});
}
For additional details, take a look at this official document.

Hide Google Maps controls on small screens (mobiles, etc...)

How to hide Map Type option (Map, Satellite...) if the screen si smaller than certain amount of pixels? This is how my Google Maps API V3 code looks like:
var mapOptions = {
center: new google.maps.LatLng(initLat, initLong),
zoom: level,
scaleControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
As you can see mapTypeControl is set to true now, and I need it to be set to false if screen width is smaller than lets say 340px;. Also there is mapTypeControlOptions which should be hidden or something if the screen is smaller.
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.
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/

Google maps street view panorama options

I'm utilizing the Street View option with Google Maps but I can't figure out how to customize the controls if don't have the street view as the initial screen. Right now I have:
map = new google.maps.Map(mapDiv, {
zoom: 14,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER
},
zoomControl:false,
disableDefaultUI: false
so this will enable the Pegman that you can drag to switch to the street view but I want to disable the close box and the zoom. I did find this API documentation but I'm not sure how to set the controls when I'm not manually creating the street view myself. Any help would be appreciated.
Directly after you create your map object, you can do:
map.get('streetView')
.setOptions({
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT,
},
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
})
Or, however else you'd like to setup your controls. https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanoramaOptions
is a list of available options. You can also pass a new StreetViewPanorama upon creating your map object, but unless you have some serious customization to do, it's not necessary.
Get a copy of the map object. When the event is called, run the following: map.set('zoomControl', false)
map.set('enableCloseButton', false)

How do I change the Google Maps zoom control style? [duplicate]

This question already has an answer here:
ZoomControlStyle - Large 'small' buttons
(1 answer)
Closed 8 years ago.
I'm using Google Maps API v3.17
Here's my code:
this._options = {
zoom: this._params.zoom,
center: new google.maps.LatLng(this._params.center.lat, this._params.center.lng),
// Disabled controls
mapTypeControl: false,
panControl: false,
scaleControl: false,
streetViewControl: false,
// Zoom control
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
// Disable scrollwheel and double-click zooming
scrollwheel: false,
disableDoubleClickZoom: true // Because clicking through images results in a zoom
};
this._map = new google.maps.Map(this._el, this._options);
I'm getting an old-style Google Map, with little zoom icons (see image, left side).
What I'm looking for is the larger icons, per the API docs (see image, right side).
My code is identical to what they're saying to do... what am I missing?
Thanks!!
The terms SMALL and LARGE are misleading a bit, they are not related to the size, they mean used with a zoom-control: hide or show the slider.
There is no built-in option to set the "size".
What you see on the right side seems to be a signed-in map, which uses different controls.
Note: Signed-in maps aren't available in v3.17

Categories