集成 fullPage.js 和 google map api

Question

我正在尝试集成 fullPage.js 和 google map api，但它似乎不起作用。

下面是我正在尝试集成的google map api和fullpage.js的示例jsFiddle。

jsFiddle of Google Map

jsFiddle of fullPage.js

我想要创建的结果与此类似，因为您注意到谷歌地图（充当背景）嵌入到 fullpage.js（示例图像只是一张编辑过的图片）

id="canvass" 是我的谷歌地图

<div id="canvass"></div>

那么这是我的第一部分，包括几张幻灯片。

 <div class="section"  id="section1">
<div class="slide">
    <div id="canvass"></div>
    <img src="images/index_images/BG_Slide.png" width="750" height="200"/>
    <p>
        <strong>MULTI-MACH INTERNATIONAL (PHILS)</strong> has been one of the Philippines leading players in the supply and distribution of leading<br>brands of various foodservice equipment from various parts of the world (esp. Europe, USA, and Japan) that are known and endorsed<br>by respected international consultants and renown practitioners in food service and construction fields.
    </p>
</div>
<div class="slide">
    <p><strong>MULTI-MACH INTERNATIONAL (PHILS)</strong> has been one of the Philippines leading players in the supply and distribution of leading<br>brands of various foodservice equipment from various parts of the world (esp. Europe, USA, and Japan) that are known and endorsed<br>by respected international consultants and renown practitioners in food service and construction fields.</p>
</div>
<div class="slide">
    <p><strong>MULTI-MACH INTERNATIONAL (PHILS)</strong> has been one of the Philippines leading players in the supply and distribution of leading<br>brands of various foodservice equipment from various parts of the world (esp. Europe, USA, and Japan) that are known and endorsed<br>by respected international consultants and renown practitioners in food service and construction fields.</p>
</div>
<div class="slide">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, nam dolorem enim quod placeat tempore praesentium nobis quam maxime eum?<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum facere excepturi minus corrupti nesciunt dolorum!<br>by respected international consultants and renown practitioners in food service and construction fields.</p>
</div>

以下是我试图获得这种结果的尝试。

1. 将其放在第一部分的第一张幻灯片上。我想它会充当背景
2. 创建另一个专门用于仅显示谷歌地图的部分（我只是在测试它，但它似乎也不起作用）

您对我做错了什么有任何想法，或者它真的与 fullpage.js 不兼容吗？请注意，我使用的是 codeigniter。

Answer 1

您必须在fullpage.js提供的afteRender回调中添加地图的初始化，详细in the documentation：

afterRender()
该回调在页面结构生成后立即触发。 这是您要用于初始化其他插件或触发任何需要文档准备就绪的代码的回调（因为此插件会修改 DOM 以创建结果结构）。

Live demo

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    afterRender: function () {
        //Start the whole shabang when DOM and APIs are ready by calling initialize()
        initialize();
    }
});