Карты Google не покрывают весь экран при нажатии на кнопку

Код:

<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#button {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
height: 50px;
width: 150px;
left: 50%;
top: 50%;
position: absolute;
margin-top: -25px;
margin-left: -75px;
border-radius: 5px;
color: white;
background-color: #4081FB;
font-size: 18px;
border: solid 1px #4081FB;
}
#button:hover {
cursor: pointer;
}
#map {
display: none;
position: absolute;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#button").click(function () {
$("#map").fadeIn("slow");
});
});
</script>
</head>
<body>
<input type="button" id="button" value="Open Map" />
<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26496.05743213355!2d151.12773775!3d-33.88946895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1439976442653" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>

Я не уверен, почему iframe Google Maps не покрывает весь экран, когда я нажимаю кнопку. Я установил для iframe значение background-size: cover; чтобы закрыть весь экран, как только я нажал на кнопку. Может кто-то помочь мне с этим? Спасибо.


google-maps javascript html jquery background-size
person B.Liu    schedule 29.08.2015    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вам нужно добавить высоту на карту, а также изменить встроенный css в iframe.

  • Добавить высоту/ширину (100vh, 100vw) на #map
  • Измените высоту/ширину встроенных атрибутов html (100%, 100%) на <iframe>

//HTML

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26496.05743213355!2d151.12773775!3d-33.88946895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1439976442653" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>

//CSS

#map {
    height: 100vh;
    width: 100vw;

    display: none;
    position: absolute;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}
person Jordan Davis    schedule 29.08.2015

arrow_upward
0
arrow_downward

Как ответил Джордан,

Вам нужно разрешить #map распространяться по экрану, поэтому дайте ему

   #map {
    height: 100%;
    width:100%; }

А затем сделайте iframe распределенным по #map div, чтобы код iframe был: width="100%" height="100%" вместо width="600" height="450".

Кроме того, в конце вы можете удалить пробелы за пределами #div, вы можете добавить нулевое поле к телу.

body { margin:0; }
person a4aLien    schedule 29.08.2015

arrow_upward
0
arrow_downward

Вам просто нужно сделать три вещи:

  1. Укажите width:100%;, height:100%; и margin:0px; для своего тела.

ПОТОМ

  1. Укажите width:100%; и height:100% для вашего div карты.

И

  1. Удалите встроенную ширину и высоту iframe и укажите min-width:100% и min-height:100% для вашего iframe.

Вот jsfiddle с изменениями: http://jsfiddle.net/65sf2f66/20/

И вот коды, использующие фрагмент SO:

$(document).ready(function () {
$("#button").click(function () {
$("#map").fadeIn("slow");
});
});
body  {
    width:100%;
    height:0%;
    margin:0px;
}
#button {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
height: 50px;
width: 150px;
left: 50%;
top: 50%;
position: absolute;
margin-top: -25px;
margin-left: -75px;
border-radius: 5px;
color: white;
background-color: #4081FB;
font-size: 18px;
border: solid 1px #4081FB;
}
#button:hover {
cursor: pointer;
}
#map {
    height: 100%;
    width: 100%;
    display: none;
    position: absolute;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}
#map iframe {min-width:100%;min-height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="button" value="Open Map" />
<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26496.05743213355!2d151.12773775!3d-33.88946895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1439976442653" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

person AndrewL64    schedule 29.08.2015