Menu
As shown below, beides the '+' icon is the full screen button.
When clicked on it, it does not go full screen.
I tried basic jQuery :
$("#fullScreen-btn").css({height: 100%, width: 100%});
This does not seem to work.
I need it to work like we press F11 on browsers, it must go full screen on mobile (not the google maps app)
Can anyone help me out here ?
457
There are a several reasons why your google maps may not be working, the most common issue being no Google Map API key set or set incorrectly. To use the Google Maps JavaScript API, you must register your app project on the Google Cloud Platform Console and get a Google API key which you can add to your app.
FullScreen GoogleMap when push Esc key & F11. Ability to full screen map (hide header and left panel and nav).
In the below example, applying style="height: 100%;" to the body and html makes google maps full height because the div the map loads in to is a child of body . In your case, you need to add style="height: 100%;" to the relevant parent elements of #map .
Go to the Credentials section, which can be accessed from the left side bar under Google Maps Platform > Credentials. Check that the API key you currently use on your website is listed.
In order to make a Mobile Browser visible in full screen mode, you should use the requestFullscreen()
Add an event listener to the button dynamically when it gets loaded as
button.addEventListener("click",function(){
document.body.requestFullscreen();
});
Or
button.addEventListener("click",function(){
document.documentElement.requestFullscreen();
});
Works for Chrome for android.
Also many browser for Computers also have this ability.
Read more on MDN
52
Your jQuery needs correction - you missed the quotes, try this:
$("#fullScreen-elm").css({"height": "100%", "width": "100%"});
and moreover you need to update this css for the screen element you want to resize and not the fullscreen button.
And yes, Element.requestFullscreen() is definitely an other option refer MDN
29
Try this. I calculated the height separately to achieve the results. Tested in android device.
$(document).ready(function() {
let height = $(document).height();
$('.fullscreen').on('click', function() {
$('iframe').css({
height: height,
width: '100%'
});
});
});body {
margin: 0;
padding: 0;
}
.fullscreen {
position: absolute;
top: 10px;
right: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423283.3363121453!2d-118.69191670818714!3d34.020750397391296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2srw!4v1499159650271"
width="250" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
<div class="container">
<input type="button" name="fullscreen" value="fullscreen" class="fullscreen" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
