Html 谷歌地图和一些样式需要多次刷新浏览器_Html_Google Maps Api 3

Html 谷歌地图和一些样式需要多次刷新浏览器

html google-maps-api-3

Html 谷歌地图和一些样式需要多次刷新浏览器,html,google-maps-api-3,Html,Google Maps Api 3,我在我的网站上实现了谷歌地图，它发生了一些奇怪的事情。有时，当我加载页面时，地图不会显示，但如果我刷新它，它会显示。但有时在它出现之前需要刷新几次，有些样式似乎会出现，在我第一次加载页面时，有些样式没有应用，但当我加载时，一切看起来都很好我不知道我应该检查什么。我的老板刚刚让我检查调试，我不知道他是什么意思这是我的头版： <!DOCTYPE html> <html> <head> <title>Decorum Wines</t

我在我的网站上实现了谷歌地图，它发生了一些奇怪的事情。有时，当我加载页面时，地图不会显示，但如果我刷新它，它会显示。但有时在它出现之前需要刷新几次，有些样式似乎会出现，在我第一次加载页面时，有些样式没有应用，但当我加载时，一切看起来都很好

我不知道我应该检查什么。我的老板刚刚让我检查调试，我不知道他是什么意思

这是我的头版：

<!DOCTYPE html>
<html>
  <head>
    <title>Decorum Wines</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/decorumStyles.css" rel="stylesheet" type="text/css"/>
    <link href="css/decorumStyles_custom.css" rel="stylesheet" type="text/css"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
    <link href="css/pager.css" rel="stylesheet" type="text/css"/>
    <script async src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
    <script>       
       var google;

        function initialize() {
            var myLatlng = new google.maps.LatLng(51.5235958, -0.219394, 17);
            var mapProp = {
                zoom: 15,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'hello world'
            });
        }

        google.maps.event.addDomListener(window, "load", initialize());

        </script>
  </head>
  <body>


礼仪酒
var谷歌；
函数初始化（）{
var mylatng=new google.maps.LatLng（51.5235958，-0.219394,17）；
var mapProp={
缩放：15，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“你好，世界”
});
}
google.maps.event.addDomListener（窗口“加载”，初始化（））；

这是我最下面的部分：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/toggleBrowse.js" type="text/javascript"></script>
   <script type="text/javascript">

    // Add a script element as a child of the body
    function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "home.php";
    document.body.appendChild(element);
    }
    // Check for browser support of event handling capability
    if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;

    </script>
      </body>
    </html>


//添加脚本元素作为主体的子元素
函数downloadJSAtOnload（）{
var元素=document.createElement（“脚本”）；
element.src=“home.php”；
document.body.appendChild（元素）；
}
//检查浏览器是否支持事件处理功能
if（window.addEventListener）
addEventListener（“加载”，downloadJSAtOnload，false）；
else if（窗口附件）
window.attachEvent（“onload”，downloadJSAtOnload）；
else window.onload=下载jsatonload；

我已经查看了我的外部文件的顺序，但是我认为这是可以的，但是，它肯定不是100%正常工作的，因为正如我所解释的，它的行为有点奇怪

欢迎任何意见

谢谢大家!

必须删除该行：

google.maps.event.addDomListener(window, "load", initialize());

异步加载maps API时，将自动调用

初始化

（因为您将其用作

回调

-参数）。此外，在执行此行时，

google.maps.event

可能还不可用

目前还不清楚home.php将做什么（如果它与问题相关），但它将根据在

initialize

中创建的映射执行什么操作，您应该在

initialize

的末尾加载此脚本

<script>       

function initialize() {
    var myLatlng = new google.maps.LatLng(51.5235958, -0.219394);
    var mapProp = {
        zoom: 15,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'hello world'
    });
    downloadJSAtOnload();
}       

</script>

调试——意味着打开浏览器控制台检查错误——感谢您的回答！！虽然我仍然有同样的问题，但它在firefox、chrome和safari中绝对可以正常工作，但在explorer中却不行…：在任何版本中都有！此页面是否联机（您可以共享链接）？

// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;