集成fullPage.js和谷歌地图API

Question

我试图整合fullPage.js和谷歌地图api，但似乎它不起作用。

以下是我试图整合的google map api和fullpage.js的示例jsFiddle。

jsFiddle of Google Map

jsFiddle of fullPage.js

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

ID =＆＃34;帆布＆＃34;是我的谷歌地图

<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. 将其放在第1张幻灯片的第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();
    }
});