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