集成fullPage.js和谷歌地图api

Question

我正在尝试整合fullPage.js和谷歌地图api，但它似乎并没有工作。

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

jsFiddle of Google Map

jsFiddle of fullPage.js

，我要创建的结果与此类似，当你看到了谷歌地图（作为背景）嵌入到fullpage.js（样本图像仅仅是只有一个编辑后的图片）

ID = “帆布” 是我的谷歌地图

<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详细的in the documentation提供afteRender回调内部地图的初始化：）

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(); 
    } 
});