Search code examples
javascriptasp.net-mvcbing-mapspushpininfobox

Bing Map doesn't display when I add another parameter to my function

I am loading longitude and latitude from my database, I want to add an additional field for for my function and pass in other values from my database to show when I click on my pin, it works fine with just the latitude and longitude as the parameters for the function AddData(latitude,longitude) but as soon as I add another value like AddData(latitude,longitude,Zoo Name) my map no longer displays. I am unsure of what I am doing wrong and I apologise if this is a simple mistake but I am just getting use to javascript. 

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script type="text/javascript">
var map = null, infobox, dataLayer;

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

    dataLayer = new Microsoft.Maps.EntityCollection();
    map.entities.push(dataLayer);

    var infoboxLayer = new Microsoft.Maps.EntityCollection();
    map.entities.push(infoboxLayer);

    infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) });
    infoboxLayer.push(infobox);

    @foreach (var item in Model)
       {
              @: AddData(@item.latitude,@item.longitude,@item.ZooName);
              //till here
                }

}

function AddData(latitude, longitude,ZooName) {
    var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude));
    pin.Title = latitude.toString();
    pin.Description = latitude.toString();
    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    dataLayer.push(pin);

}

function displayInfobox(e) {
    if (e.targetType == 'pushpin') {
        infobox.setLocation(e.target.getLocation());
        infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.Description });
    }
}
</script>

<body onload="GetMap();">
<div id='myMap'></div>
</body>
Solution

  • Adding an additional parameter to your function shouldn't cause the map to stop working. I suspect that an error is occurring when accessing the @item.ZooName value. I'm guessing that this is a string, it likely needs to be surrounded with quotes. You should see an error in the browsers console. As such, the error is likely preventing the code to load the map from firing and thus the map is never loaded.