Javascript 谷歌地图未显示在调用到网页的文件中

我在一个网站上工作，它有一个包含谷歌地图的页脚。在主页上，页脚编码在页面上，显示得很好：

但是，在所有其他页面中，我使用jquery从外部文件调用页脚，如下所示：

<script> 
    $(function(){
        $('#header').load('header_contact.html')
        $('#fatFooter').load('footer.html')
        $('#rightNav').load('rightNav.html')
    });
</script>

$（函数（）{
$（'#header'）.load（'header_contact.html'））
$（'#fatFooter'）.load（'footer.html'））
$（'#rightNav'）.load（'rightNav.html'））
});

在像这样加载页脚的页面上，地图不会每次都显示-只是偶尔显示

我是否遗漏了导致地图在每次加载页面时无法正确显示的简单内容？我不想把页脚编码到每一页上

---

欢迎您提出任何建议。

通常这与CSS文件的性能不好有关，或者它找不到任何东西，并且默认为浏览器的默认值。当我检查您主页的控制台日志时，它没有包含任何错误。但是，当我检查其他页面时，它抛出了一个错误，声明“Uncaught TypeError:无法读取属性'offsetWidth'of null'，简而言之，这是映射宽度值。这可能是由于除了可以在浏览器源选项卡中看到的index.html之外的所有页面上都存在404错误。

---

正在显示一个404。我会解决这些404错误，它应该会解决您的问题。

在您调用

init\u map（）

\map\u canvas

时，它不存在（稍后将加载）

调用

加载

-回调中的函数：

$('#fatFooter').load('footer.html',function(){if(!window.map){init_map();}});

另外，将此项添加到

init_map（）

的开头，以避免出现错误：

if(!document.getElementById('map_canvas')){return;}

---

您正在设置header/fatFooter/rightNav加载代码和callMap脚本之间的竞争条件。所有这些文件都是异步加载的，因此无法保证哪个文件将首先完成。为了防止在加载fatFooter之前运行callMap脚本，您需要使用回调，而不是依赖window的加载事件

因为您在两个地方使用它，所以最简单的方法可能是将init_映射的主体包装为try/catch（以处理竞争条件不符合您的要求的情况），并在footer.html的底部添加一个脚本块，该脚本块调用init_映射，但也将其包装为try/catch。因此，无论哪种方法，都会触发一个try/catch块

另一个选项是创建一个自定义事件，该事件由footer.html加载触发，并由callMap脚本监听。

是它找不到的文件。