Код:Google Maps не FadeIn, когда я нажимаю на кнопку
<!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 {
visibility: hidden;
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>
Я не знаю, почему, когда я нажимаю на кнопку «Открыть на карте», Google Maps не не выцветает в Я включил Google Maps в скрипт и использовал jQuery fadeIn, однако карта не исчезает, когда я нажимаю кнопку. Кто-нибудь может мне помочь? Благодарю.
Вы видите ошибки в консоли? –
Извините, 'видимость скрыта' Возникает проблема. измените его на 'display: none'. –
Спасибо, однако знаете ли вы, почему карта не покрывает всю страницу, хотя у меня есть размер фона: обложка; ? –