ハンドルバーを使って複数のGoogleマップエリアをdivに追加する方法

Question

私は、情報を表示したいアイテムをユーザーがクリックすると、Googleマップミニマップの横にデータを表示する必要があるプロジェクトに取り組んでいます。

基本的には次のように動作します。彼は情報に関する

ブラウザがあるべきでjQueryとハンドルバーを使用して、画面の側に別のテーブルを追加します見たいラベルに

1. ユーザーがクリック：
2. 情報
からの情報がある場所を示す
• Googleマップのインスタンス

何とか私はJS + jQuery + Handlebarsの組み合わせを動作させることができません。私はHandlebarsテンプレートでJavaScriptコードを実行するヘルパーを作成する必要があることを理解していますが、HBテンプレートのテーブル内にGoogle Mapsインスタンスを追加しても機能しません。

ここに私が現時点で取り組んでいるコードがあります。助けてくれてありがとう！

テンプレートファイル：JavaScriptのコード

<script id="entry-template" type="text/x-handlebars-template"> 
<section class="Info" id={{id}}> 
    <header class="InfoHeader small" onclick="collapseInfobox(this)"> 
     <p class=""></p> 
    </header> 

    <article class="hidden"> 
     <table class="Analyses" border="1"> 
     <tr> 
      <td class="minimap"><div id="minimap_1_{{id}}" class="minimap">{{miniMap_1 context}}</div></td> 
      <td class="graph"><div>{{ graph_1 }}</div></td> 
     </tr> 
     </table> 
    </article> 
</section> 
</script> 
<script type="text/javascript"> 
var HTMLsource = $("#entry-template").html(); 
var HTMLtemplate = Handlebars.compile(HTMLsource); 
</script> 

：

function addInfo(id, start, end) { 

var context = { 
    id: id, 
}; 

Handlebars.registerHelper('miniMap_1', function(data) { 
    var minimapOptions = { 
     disableDefaultUI: true, 
     center: new google.maps.LatLng(_Coords.lat, _Coords.lon), 
     zoom: 13, 
    }; 
    var minimap1 = new google.maps.Map(document.getElementById(this), minimapOptions); 

}); 

// contentArea is a div section in the page to which the info div should be appended 

$("#contentArea").append(HTMLtemplate(context)); 
} 

Answer 1

さて、私は私はすでに、私は数日間で苦労し、この問題を解決するために管理思います。

解決策は実際にはヘルパーを使用してGoogle Mapsインスタンスをテーブルに実装するのではなく、代わりにjQueryのready（）関数呼び出しで行います。ヘルパーを使用すると、Google Maps JSライブラリはヘルパーが実行されたときにマップを作成するマップキャンバスdivを見つけられないようです。 ready（）関数呼び出しでは、何かが挿入される前に実際にdivが作成されます。

テンプレートファイル：

<script id="entry-template" type="text/x-handlebars-template"> 
<section class="Info" id={{id}}> 
    <header class="InfoHeader small" onclick="collapseInfobox(this)"> 
     <p class=""></p> 
    </header> 

    <article class="hidden"> 
     <table class="Analyses" border="1"> 
     <tr> 
      <td class="minimap"><div id="minimap_1_{{id}}" class="minimap"></div></td> 
      <td class="graph"><div>{{ graph_1 }}</div></td> 
     </tr> 
     </table> 
    </article> 
</section> 
</script> 
<script type="text/javascript"> 
var HTMLsource = $("#entry-template").html(); 
var HTMLtemplate = Handlebars.compile(HTMLsource); 
</script> 

のJavaScriptコード：

function addInfo(id, start, end) { 

    var context = { 
     id: id, 
    }; 

    // contentArea is a div section in the page to which the info div should be appended 

    $("#contentArea").append(HTMLtemplate(context)).ready(function() { 
     var minimapOptions = { 

      // All options you'd like the map to have, e.g. 

      disableDefaultUI: true, 
      draggable: false, 
      disableDoubleClickZoom: true, 
      center: new google.maps.LatLng(_Coords.lat, _Coords.lon), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 

     }; 
     var minimap1 = new google.maps.Map(document.getElementById("minimap_1_"+context.id), minimapOptions); 
}); 
} 

この回避策は、私のために働いた、うまくいけば、これはまた、この問題が発生する可能性のある他の人をhelpes