Bing map and knockout.js

Question

I am trying to display Bing Map inside knockout.js foreach loop. But I am getting an error message "TypeError: ft is null".

However, if I donot include knockout.js then it is working fine.

But I need to use foreach loop of knockout.js in my project.

Any help would be highly appreciated.

My HTML file :-

<div class="container contact-body-contents" data-bind="foreach: addresses">
    <p class="text-bold-head"  data-bind="text: location"></p>
    <span data-bind="html: address"></span>
    <span data-bind="text: phone"></span>
    <div id='myMap' style="position:relative; width:400px; height:400px;float: "right"> 
    </div>
</div>

map.js

var map = null;         

function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
             {credentials:"credentials"}); 

// Define the pushpin location
var loc = new Microsoft.Maps.Location(41.806358,-73.112144);

// Add a pin to the map
var pin = new Microsoft.Maps.Pushpin(loc); 
map.entities.push(pin);

// Center the map on the location
map.setView({center: loc, zoom: 15});
}

Please post your code for some help. An idea of what you are trying to do would be good. — Captain John, Jan 10 '14 at 13:59
The problem isn't in the section of code you've shown. Try to create a minimal test case that reproduces the problem and post it. — ebohlman, Jan 11 '14 at 20:53

score 1 · Answer 1 · edited May 29 '16 at 13:01

I had the same issue and resolved it now.

<div class="container contact-body-contents" data-bind="foreach: addresses">
    <p class="text-bold-head"  data-bind="text: location"></p>
    <span data-bind="html: address"></span>
    <span data-bind="text: phone"></span>
    <div id='myMap' style="position:relative;width:400px;height:400px;float: "right"> 
    </div>
</div>

Take the <div id="myMap" outside the data-bind element.

<div class="container contact-body-contents" data-bind="foreach: addresses">
    <p class="text-bold-head"  data-bind="text: location"></p>
        <span data-bind="html: address"></span>
        <span data-bind="text: phone"></span>
</div>

<div id='myMap' style="position:relative;width:400px;height:400px;float: "right"> 
</div>

Bing map and knockout.js

1 Answers1