个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的谷歌地图小部件工作得很好，直到我决定将其隐藏(使用 .hide jquery )。您可以单击 div 以显示小部件(使用 .toggle jquery)。但是现在， map 不会加载到容器内。就好像它认为它仍然隐藏着一样。有任何想法吗？如果我单击浏览器上的另一个选项卡，然后直接返回页面，则会加载 map 。
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<title></title>
<link rel="stylesheet" href="sss/sss.css" type="text/css" media="all">
<script src="includes/jquery-1.9.1.min.js"></script>
<script src="sss/sss.min.js"></script>
<script src="includes/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#slidemenu ul").hover(function(){
$(".item").toggle("slide", { direction: "right" }, 400 );
});
});
$(document).ready(function(){
$(".menubutton").mouseover(function(){
$('.menubutton #line').css( "background-color", "orange")
})
.mouseout(function() {
$('.menubutton #line').css( "background-color", "white")
});
});
$(document).ready(function(){
$(".item").mouseover(function(){
$('.menubutton #line').css( "background-color", "orange")
})
.mouseout(function() {
$('.menubutton #line').css( "background-color", "white")
});
});
$(document).ready(function(){
$(".oneitem").mouseover(function(){
$('.menubutton #line').css( "background-color", "orange")
})
.mouseout(function() {
$('.menubutton #line').css( "background-color", "white")
});
});
</script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(54.149517, -8.278809),
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("fermoy"),mapProp);
var point = new google.maps.LatLng(54.149517, -8.278809);
var marker = new google.maps.Marker({
position: point,
title:"Fermoy"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(54.149517, -8.278809),
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map1"),mapProp);
var point = new google.maps.LatLng(54.149517, -8.278809);
var marker = new google.maps.Marker({
position: point,
title:"Map"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(56.104607, -6.698879),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map2"), mapProp);
var point = new google.maps.LatLng(56.104607, -5.698879);
var marker = new google.maps.Marker({
position: point,
title: "Map"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(53.344573,-6.370321),
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map3"),mapProp);
var point = new google.maps.LatLng(53.344573,-6.370321);
var marker = new google.maps.Marker({
position: point,
title:"map"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function diffImage(img)
{
if(img.src.match(/up/)) img.src = "images/down.png";
else img.src = "images/up.png";
}
</script>
<script>
$(document).ready(function(){
$(".toshow").hide();
});
$(document).ready(function(){
$("#button").click(function(){
$(".toshow").toggle();
});
});
</script>
<style>
/* Standard Menu */
body {
margin: 0px;
padding: 0px;
}
header {
background-color: black;
height: 60px;
width: 100%;
position: fixed;
z-index: 100;
} /* This is our finished menu */
.blackbar {
height: 60px;
width: 100%;
background-color: black;
} /* As the menu is not fixed this keeps a black bar behind when the menu is at the veru top */
.logo img {
height: 40px;
background-color:black;
float: left;
margin-top: 0px;
padding:9px;
margin-left: 30px;
} /* The McMahons Logo */
#navdiv li {
display: inline-block;
vertical-align: middle;
}
#navdiv a {
text-decoration: none;
color: white;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
#navdiv a:active {
color:orange;
} /* Current Page Link Highlighted Orange */
#navdiv a:hover {
color: orange;
} /* Link Hovered Orange */
nav {
width: auto;
float: right;
word-spacing: 30px;
height: 60px;
min-width: 600px;
} /* This is the part of the menu with the page links laid out horizontally */
ul {
width: 600px;
letter-spacing: 0.14em;
margin-right: 20px;
margin-left: 20px;
padding-left: 0px;
} /* List of Links to Pages */
/* Slider Menu */
#slidemenu { /* The Slide In Menu */
height: 40px;
width: 105px;
padding: 0px;
margin: 0px;
float: right;
margin-right: 30px;
}
#slidemenu a {
text-decoration: none;
color: white;
font-family: 'Lato', sans-serif;
}
#slidemenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#slidemenu ul .item {
display: none;
right: 70px;
} /* Current slidemenu position */
.oneitem {
display: block;
background-color: black;
width: 100px;
height: 19px;
text-align: center;
padding: 19px;
} /* This is already in place, jQuery doesnt need to bring this in */
.item {
display: block;
z-index: 100;
background-color: black;
width: 100px;
height: 20px;
text-align: center;
padding: 19px;
} /* jQuery brings this into play, by default it is overtaken by (#menubutton ul .item) as this is more specific */
/* MENU BUTTON */
.menubutton {
background-color: black;
visibility: visible;
margin-top: 10px;
margin-right: 20px;
background-color: black;
position: absolute;
right: 20px;
}
#line {
background-color: white;
width: 40px;
height: 5px;
margin: 6px;
}
/* RESIZING WINDOW ADJUSTMENTS */
@media only screen and (max-width: 950px) {
nav{
display: none;
}
} /* Rids Navgation Links when screen is minimized */
@media only screen and (min-width: 950px) {
#slidemenu{
display: none;
}
} /* Rids Menu Button when at full-screen */
@media only screen and (max-width: 450px) {
.logo img{
margin-left: 4px;
}
} /* Pulls Logo slightly left when screen is highly minimized to prevent Menu Bottom Colliding */
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
#footer {
clear: both;
position: relative;
z-index: 10;
height: 130px;
margin-top: 3em;
background-color: black;
bottom: 0px;
overflow: hidden;
}
#content { padding-bottom: 3em; }
.box{
width: 15%;
height:124px;
display: inline-block;
min-width: 200px;
}
.box h1{
font-family: 'Lato', sans-serif;
font-size: 20px;
}
#social img{
width: 60px;
height:60px;
margin:0px;
padding-bottom: 10px;
}
#social h1{
margin-bottom: 5px;
padding-left: 53px;
}
.trusshead h1{
font-family: 'Lato', sans-serif;
font-size: 60px;
text-transform: uppercase;
margin:0px;
}
#fermoy{
margin-top: 30px;
border: 2px solid black;
}
#fermoy2, #blanch, #ballyfermott, #portarlington, #limerick, #cork, #dunmanway, #tralee, #galway, #waterford, #coleraine, #derry, #omagh {
margin-top: 30px;
border: 2px solid black;
border-top: 3px solid black;
}
.text p {
font-family: 'Lato', sans-serif;
text-align: center;
}
.contactboxes {
float: left;
width: 195px;
height: 308px;
}
.contactboxes h3{
font-family: 'Lato', sans-serif;
margin: 0px;
margin-top: 35px;
}
.contactboxes p{
font-family: 'Lato', sans-serif;
margin: 0px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="images/mclogo.png">
</div>
<div id="navdiv">
<div id="slidemenu">
<ul>
<li class="menubutton">
<div id="line"></div>
<div id="line"></div>
<div id="line"></div>
</li>
<li class="oneitem" style="padding-bottom: 22px;"></li>
<li class="item" ><a href="index.html">Home</a></li>
<li class="item"><a href="products.html">Products</a></li>
<li class="item"><a href="services.html">Services</a></li>
<li class="item"><a href="blog.html">Blog</a></li>
<li class="item"><a href="contact.html">Contact</a></li>
</ul>
</div>
<nav>
<ul>
<li class="hide active"><a href='index.html'>Home</a></li>
<li class="hide"><a href='products.html'>Products</a></li>
<li class="hide"><a href='services.html'>Services</a></li>
<li class="hide"><a href='blog.html'>Blog</a></li>
<li class="hide"><a href='contact.html'>Contact</a></li>
<li class="hide">
<a class="fb_icon" href="https://www.facebook.com/mcmahons123?fref=ts" target="_blank">
<img src='images/facebook.png' onmouseover="this.src='images/facebookorange.png';" onmouseout="this.src='images/facebook.png';"/></a>
</li>
</ul>
</nav>
</div>
</header>
<div id="container">
<div style="background-color: black; width:100%; height:60px; visibility: hidden;"></div>
<div id="content">
<div style="width: 1150px;; margin: 0 auto; height: 30px; margin-top: 20px;">
<div style="float:right; "><h2 style="font-family: 'Lato', sans-serif; margin:0px;">Email:  @hotmail</h2></div>
<div style="float: left;"><h2 style="font-family: 'Lato', sans-serif;margin:0px; ">Call:  12344</h2></div>
</div>
<div style="width: 100%; margin-top: 0px;">
<div style="width: 40px; height: 4px; background-color: black; margin: 0 auto;"></div>
</div>
<div class="trusshead" style="margin: 0 auto; width: 190px;">
<h1>Stack</h1>
</div>
<div style="width: 100%; margin-top: 1px;">
<div style="width: 40px; height: 4px; background-color: black; margin: 0 auto;"></div>
</div>
<div class="text" style="width: 520px; margin: 0 auto; margin-top: 50px;">
<p>123 Testing 123</p>
</div>
<div style="margin:0 auto; width: 780px; height: 400px; margin-top: 50px;">
<div class="contactboxes">
<h3>Plant</h3>
<div style="margin-top: 10px;">
<p style="margin-bottom: 10px"> 123<br>Happy Rd,<br>RedHill,<br>Spain</p>
<p style="margin-bottom:5px;"> <strong>Email:</strong><br> @google</p>
<p style="margin-bottom:5px;"> <strong>Tel:</strong> <br>000000</p>
<p> <strong>Fax:</strong> <br>00000</p>
</div>
</div>
<div id="map1" style="width:405px; height:308px; float:right; display:inline; "></div>
</div>
<div style="width: 430px; height: 30px; margin:0 auto;"><p style="font-family: 'Lato', sans-serif">Click the arrow to expand a list of maps.
</p></div>
<div id="button" style="width: 30px; margin:0 auto;">
<img src="images/down.png" id="image1" style="height: 30px;" onclick=diffImage(this) /></div>
<div class="toshow">
<div style="width: 90px; margin: 0 auto;"><h2 style="font-family: 'Lato', sans-serif; ">Maps</h2></div>
<div style="margin:0 auto; width: 780px; height: 1030px; ">
<div style="width:100%; height: 405px;">
<div class="contactboxes">
<h3>Dub</h3>
<div style="margin-top: 10px;">
<p style="margin-bottom: 10px"> 123<br>Happy Rd,<br>RedHill,<br>Spain</p>
<p style="margin-bottom:5px;"> <strong>Email:</strong><br> @google</p>
<p style="margin-bottom:5px;"> <strong>Tel:</strong> <br>000000</p>
<p> <strong>Fax:</strong> <br>00000</p>
</div>
</div>
<div id="map2" style="width:405px; height:308px; float:right; display:inline; "></div>
</div>
<div style="width:100%; height: 405px;">
<div class="contactboxes">
<h3>Dub</h3>
<div style="margin-top: 10px;">
<p style="margin-bottom: 10px"> 123<br>Happy Rd,<br>RedHill,<br>Spain</p>
<p style="margin-bottom:5px;"> <strong>Email:</strong><br> @google</p>
<p style="margin-bottom:5px;"> <strong>Tel:</strong> <br>000000</p>
<p> <strong>Fax:</strong> <br>00000</p>
</div>
</div>
<div id="map3" style="width:405px; height:308px; float:right; display:inline; "></div></div>
</div>
</div>
</div>
<div id="footer">
<div style="margin: 0 auto; width: 705px;"> <!--To Centre Boxes-->
<div class="box"> <!--Box-->
<h1 style="color: white; padding-top:40px; margin-left: 40px;">News</h1>
<img src="images/black.jpg" style="width: 190px; height: 35px; "> <!--Black Box under writing - keeps writing off bottom-->
</div>
<div style="width: 40px; display: inline-block;"></div> <!--Space Div-->
<div class="box" id="social"> <!--Box-->
<h1 style="color: white;">Follow Us</h1>
<div style="width: 90px; height: 2px; background-color: white; margin-bottom: 5px; margin-left: 51px"></div> <!--Line-->
<div style="width: 128px; margin-left: 33px;"> <!-- Containing div for two circles-->
<a href="https://www.facebook.com"><img src="images/facebookfooter.png"></a>
<img src="images/twitterfooter.png">
</div>
</div>
<div style="width: 40px; display: inline-block"></div> <!--Space Div-->
<div class="box"> <!--Box-->
<img src="images/ce.png" style="height: 30px; margin-left: 75px; ">
<img src="images/black.jpg" style="width: 190px; height: 40px; "> <!--Black Box under writing - keeps writing off bottom-->
</div>
</div>
</div>
</body>
</html>
最佳答案
这里有几件事。
其中之一是您的 div id 是 maps但是你的getElementById指map
第二个是谷歌地图试图计算出容器 div 的高度和宽度，但它无法做到这一点。您应该为您的 div 指定明确的高度和宽度，例如: <div id="map" style="height:500px;width:500px"></div>
第三个是当您取消隐藏需要通过 google.maps.event.trigger(map, "resize"); 通知 map 的 div 时，会发生调整大小。
通过这些更改，您的代码应该按预期工作。我在 https://jsfiddle.net/tjvr5uaq/1/ 创建了一个 jsfiddle来演示。
关于javascript - 无法加载我的谷歌地图小部件。它工作得很好，直到我决定将其隐藏(使用 .hide)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31038873/
25
4
0
这两个包看起来非常相似: http://www.passportjs.org/packages/passport-google-oauth2/ http://www.passportjs.org/pa
我想在我的网站上添加通过 Google 和 Twitter 登录的按钮。我需要只使用应用程序的客户端而不是服务器端来完成此操作。但我没有找到任何 API。对于我发现的所有内容，我需要使用带有 key
我使用此链接通过 google plus 共享我的页面。 https://plus.google.com/share?url=http%3A%2F%2Fexample.com%2Fcompany%2
我正在尝试学习 google API，并且我的经验是使用 Python，因此我尝试使用 google api python 客户端来访问一些 google 服务，但在构建服务对象时遇到错误。 从 ap
在其实际的实时托管平台上构建实时站点的努力中，有没有办法告诉谷歌不要索引该网站？我发现了以下内容: http://support.google.com/webmasters/bin/answer.py
我正在开发一个 iOS 应用程序。当我运行用于 google+ 登录的程序时，在我点击允许访问按钮后，会显示此消息。 You've reached this page because we have
我有一个非常复杂的网站，每个页面包含 11 个 js 文件。 我最近添加了 google +1 按钮，代码如下: 这会正确显示 +1 按钮，直到我单击它。当我单击它时，出现此错误:https://
我正在尝试使用 google API 创建一个 html 文件，以便在 google MAPS 上显示 KML 文件。 这是 HTML 代码: function initMap() {
我是使用 Google Benchmark 的新手，在本地运行代码与在 Quick-Bench.com 上运行代码时，我收到了运行相同基准测试(下方)的不同结果，该基准测试使用 C++ 检索本地时间.
我已按照 Google 网站上的说明通过添加以下元标记在我的 AngularJS 网站上启用 Ajax 抓取: 呈现的内容有一些链接，如: User 1 User 2 User 3 还有一些呈现动态
通过 Google 手册实现 Google AppInvite - link . 启动 Invite Activity 并在 LogCat 中获取下一步: E/AppInviteAgent: Get
那么有人用过 Google 的 Go 吗？我想知道数学性能(例如触发器)与其他具有垃圾收集器的语言(如 Java 或 .NET)相比如何？ 有人调查过吗？ 最佳答案 理论性能:纯 Go 程序的理论性能
Stackdriver 测试我的网站启动速度慢 我们使用 cloudflare 作为我们的站点 CDN 提供商。我们使用 stackdriver 从外部测试站点可用性，我们将时间检查间隔设置为 1 分
我正在尝试使用 stax.GeneralConv() ( https://jax.readthedocs.io/en/latest/_modules/jax/experimental/stax.htm
我有一个从谷歌金融中提取日内数据的软件。但是，由于昨天 Google 更新了 API，所以软件报错了 Conversion from string HTML HEAD meta http-equiv=
我们在尝试从 Google 获取 oAuth token 时遇到“redirect_uri_mismatch”错误: [client 127.0.0.1:49892] {\n "error" : "
我的网站正在使用 Google reCAPTCHA 控件，但我听说它被阻止了 中国，反正我看到有人报告说将 API 更改为 https://www.recaptcha.net在中国工作？ Anyone
背景 WordPress Google Adsense 谷歌自动插入 anchor 定广告 https://pptmon.com 问题 如下图所示，主播广告的容器高度太大了! 如何调整高度？ 这是谷歌
我在使用 Google Colab 时遇到问题。当我想制作一个新的 Python3 Notebook 时，由于我登录了我的 Google 帐户，因此无法加载刚刚打开的新页面。 我该怎么办？ 感谢您的帮
我正在使用 facebook和 google oauth2使用 passport js 登录, 有了这个流 用户点击登录按钮 重定向到 facebook/google auth 页面(取决于用户选择的
我是一名优秀的程序员,十分优秀！