Javascript 如何使用手柄将多个谷歌地图区域附加到div

我正在做一个项目，在这个项目中，当用户点击他想要查看信息的项目时，我需要在谷歌地图的小地图旁边显示数据

基本上它是这样工作的：

用户单击希望查看有关信息的标签

Browser使用jQuery和Handlebar在屏幕侧面附加一个单独的表，其中应包含：

• 显示信息来源位置的谷歌地图实例
• 信息

尽管不知何故，我无法让JS+jQuery+handlebar组合正常工作。我知道我需要创建一个助手来执行Handlebar模板中的JavaScript代码，但不知怎么的，在HB模板的表中添加一个Google Maps实例是行不通的

这是我目前正在编写的代码。谢谢你的帮助

模板文件：

---

好吧，我想我已经设法解决了这个我挣扎了几天的问题

解决方案不是实际使用helper来实现表的GoogleMaps实例，而是通过jQuery的ready（）函数调用来实现。在使用帮助程序时，Google Maps JS库似乎找不到在运行帮助程序时创建地图的map canvas 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">{{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));
}

<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>

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