I'm working on a project in which I need to show data next to a Google Maps minimap as user clicks on items of which he desires to see information from.

Basically it works like this:

1. User clicks on a label he wishes to see information about
2. Browser appends a separate table to the side of the screen using jQuery and Handlebars in which there should be:
   • Google Maps instances showing the location the information is from
   • The information

Though somehow I cannot manage to get the JS + jQuery + Handlebars combination to work. I understand that I need to create a helper to execute JavaScript code in Handlebars template, but somehow adding a Google Maps instance within the table in the HB template is not working.

Here's the code I'm working on at the moment. Thanks for any help!

Template file:

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

JavaScript code:

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

• javascript
• google-maps
• google-maps-api-3
• handlebars.js

Okay, I guess I already managed to solve this issue I struggled with for couple of days.

Solution was not to actually use helper to implement the Google Maps instances to the table, but instead do this with jQuery's ready() function call. It seems that when using the helper, the Google Maps JS library does not find the map canvas div to which to create the map when the helper is ran. With ready() function call the div is actually created before anything is inserted there.

This workaround worked for me, hopefully this helpes also others who might encounter this issue:

Template file:

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

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