Google Maps API v3 - how to detect when map changes to full screen mode?
Is there a way to detect when the user clicks the default fullscreen mode button?
These are the map options I'm using:
var mapOptions = {
center: {
lat: 40.907192,
lng: 20.036871
},
zoom: 2,
fullscreenControl: true
};
google-maps google-maps-api-3
add a comment |
Is there a way to detect when the user clicks the default fullscreen mode button?
These are the map options I'm using:
var mapOptions = {
center: {
lat: 40.907192,
lng: 20.036871
},
zoom: 2,
fullscreenControl: true
};
google-maps google-maps-api-3
I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…
– MEGApixel23
Dec 8 '17 at 12:08
add a comment |
Is there a way to detect when the user clicks the default fullscreen mode button?
These are the map options I'm using:
var mapOptions = {
center: {
lat: 40.907192,
lng: 20.036871
},
zoom: 2,
fullscreenControl: true
};
google-maps google-maps-api-3
Is there a way to detect when the user clicks the default fullscreen mode button?
These are the map options I'm using:
var mapOptions = {
center: {
lat: 40.907192,
lng: 20.036871
},
zoom: 2,
fullscreenControl: true
};
google-maps google-maps-api-3
google-maps google-maps-api-3
asked Sep 21 '16 at 15:32
CarlosCarlos
9841917
9841917
I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…
– MEGApixel23
Dec 8 '17 at 12:08
add a comment |
I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…
– MEGApixel23
Dec 8 '17 at 12:08
I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…
– MEGApixel23
Dec 8 '17 at 12:08
I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…
– MEGApixel23
Dec 8 '17 at 12:08
add a comment |
3 Answers
3
active
oldest
votes
I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed
event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:
google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );
function onBoundsChanged() {
if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
$(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
console.log( 'FULL SCREEN' );
}
else {
console.log ('NOT FULL SCREEN');
}
}
Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:
if ( $( '.gm-style' ).height() == window.innerHeight &&
$( '.gm-style' ).width() == window.innerWidth ) {
2
The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen
– Philipp
Dec 12 '17 at 8:48
add a comment |
This solution it is working for me:
/** Full Screen event */
$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
var isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
if (isFullScreen) {
console.log('fullScreen!');
} else {
console.log('NO fullScreen!');
}
});
for ie11, also add "MSFullscreenChange"
– JohnnyFun
Jan 7 at 21:36
add a comment |
You can use HTML5 Fullscreen API which has the fullscreenchange event:
"When fullscreen mode is successfully engaged, the document which
contains the element receives a fullscreenchange event. When
fullscreen mode is exited, the document again receives a
fullscreenchange event".
Please note that
"For the moment not all browsers are using the unprefixed version of the API".
So, for instance, in Mozilla Firefox the event handler would look like this
document.onmozfullscreenchange = function(event) {
console.log("Full screen change")
}
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39620850%2fgoogle-maps-api-v3-how-to-detect-when-map-changes-to-full-screen-mode%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed
event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:
google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );
function onBoundsChanged() {
if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
$(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
console.log( 'FULL SCREEN' );
}
else {
console.log ('NOT FULL SCREEN');
}
}
Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:
if ( $( '.gm-style' ).height() == window.innerHeight &&
$( '.gm-style' ).width() == window.innerWidth ) {
2
The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen
– Philipp
Dec 12 '17 at 8:48
add a comment |
I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed
event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:
google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );
function onBoundsChanged() {
if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
$(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
console.log( 'FULL SCREEN' );
}
else {
console.log ('NOT FULL SCREEN');
}
}
Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:
if ( $( '.gm-style' ).height() == window.innerHeight &&
$( '.gm-style' ).width() == window.innerWidth ) {
2
The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen
– Philipp
Dec 12 '17 at 8:48
add a comment |
I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed
event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:
google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );
function onBoundsChanged() {
if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
$(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
console.log( 'FULL SCREEN' );
}
else {
console.log ('NOT FULL SCREEN');
}
}
Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:
if ( $( '.gm-style' ).height() == window.innerHeight &&
$( '.gm-style' ).width() == window.innerWidth ) {
I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed
event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:
google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );
function onBoundsChanged() {
if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
$(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
console.log( 'FULL SCREEN' );
}
else {
console.log ('NOT FULL SCREEN');
}
}
Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:
if ( $( '.gm-style' ).height() == window.innerHeight &&
$( '.gm-style' ).width() == window.innerWidth ) {
answered Dec 1 '16 at 0:49
DaveBurnsDaveBurns
1,12021535
1,12021535
2
The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen
– Philipp
Dec 12 '17 at 8:48
add a comment |
2
The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen
– Philipp
Dec 12 '17 at 8:48
2
2
The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen
– Philipp
Dec 12 '17 at 8:48
The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen
– Philipp
Dec 12 '17 at 8:48
add a comment |
This solution it is working for me:
/** Full Screen event */
$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
var isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
if (isFullScreen) {
console.log('fullScreen!');
} else {
console.log('NO fullScreen!');
}
});
for ie11, also add "MSFullscreenChange"
– JohnnyFun
Jan 7 at 21:36
add a comment |
This solution it is working for me:
/** Full Screen event */
$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
var isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
if (isFullScreen) {
console.log('fullScreen!');
} else {
console.log('NO fullScreen!');
}
});
for ie11, also add "MSFullscreenChange"
– JohnnyFun
Jan 7 at 21:36
add a comment |
This solution it is working for me:
/** Full Screen event */
$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
var isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
if (isFullScreen) {
console.log('fullScreen!');
} else {
console.log('NO fullScreen!');
}
});
This solution it is working for me:
/** Full Screen event */
$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
var isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
if (isFullScreen) {
console.log('fullScreen!');
} else {
console.log('NO fullScreen!');
}
});
answered Aug 17 '17 at 9:50
eballoeballo
1741317
1741317
for ie11, also add "MSFullscreenChange"
– JohnnyFun
Jan 7 at 21:36
add a comment |
for ie11, also add "MSFullscreenChange"
– JohnnyFun
Jan 7 at 21:36
for ie11, also add "MSFullscreenChange"
– JohnnyFun
Jan 7 at 21:36
for ie11, also add "MSFullscreenChange"
– JohnnyFun
Jan 7 at 21:36
add a comment |
You can use HTML5 Fullscreen API which has the fullscreenchange event:
"When fullscreen mode is successfully engaged, the document which
contains the element receives a fullscreenchange event. When
fullscreen mode is exited, the document again receives a
fullscreenchange event".
Please note that
"For the moment not all browsers are using the unprefixed version of the API".
So, for instance, in Mozilla Firefox the event handler would look like this
document.onmozfullscreenchange = function(event) {
console.log("Full screen change")
}
add a comment |
You can use HTML5 Fullscreen API which has the fullscreenchange event:
"When fullscreen mode is successfully engaged, the document which
contains the element receives a fullscreenchange event. When
fullscreen mode is exited, the document again receives a
fullscreenchange event".
Please note that
"For the moment not all browsers are using the unprefixed version of the API".
So, for instance, in Mozilla Firefox the event handler would look like this
document.onmozfullscreenchange = function(event) {
console.log("Full screen change")
}
add a comment |
You can use HTML5 Fullscreen API which has the fullscreenchange event:
"When fullscreen mode is successfully engaged, the document which
contains the element receives a fullscreenchange event. When
fullscreen mode is exited, the document again receives a
fullscreenchange event".
Please note that
"For the moment not all browsers are using the unprefixed version of the API".
So, for instance, in Mozilla Firefox the event handler would look like this
document.onmozfullscreenchange = function(event) {
console.log("Full screen change")
}
You can use HTML5 Fullscreen API which has the fullscreenchange event:
"When fullscreen mode is successfully engaged, the document which
contains the element receives a fullscreenchange event. When
fullscreen mode is exited, the document again receives a
fullscreenchange event".
Please note that
"For the moment not all browsers are using the unprefixed version of the API".
So, for instance, in Mozilla Firefox the event handler would look like this
document.onmozfullscreenchange = function(event) {
console.log("Full screen change")
}
answered Sep 22 '16 at 5:41
Anatoly SukhanovAnatoly Sukhanov
1,018610
1,018610
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39620850%2fgoogle-maps-api-v3-how-to-detect-when-map-changes-to-full-screen-mode%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…
– MEGApixel23
Dec 8 '17 at 12:08