Adding Multiple Custom Markers to Bing Maps (API) example

Question

I've started with this example: https://code.msdn.microsoft.com/bing/Using-the-Bing-Maps-V8-Web-07e21f3a#content

Which basically gives a form with a search option and present the search result in a html file.

Now I'm trying to add an array of items instead of one to the html file, to show these. But I can't seem to understand how to get the html file to capture the list of addresses from the Form1.cs file with a button click

I've added this to the form:

    private void GroupBtn_Click(object sender, EventArgs e)
    {
        var pushpinInfos = new[] {
            new { lat = 41.80584, lng = 21.15498, title = "Salmon Market", description = "<a href=\"http://www.google.com\">Kipper</a> Gostivar", icon = "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Inside-Chartreuse-icon.png" },
            new { lat = 42.000900, lng = 21.466440, title = "Market", description = "Gostivar", icon = "https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg" }
        };

        MyWebBrowser.Document.InvokeScript("SetMap", new object[] { pushpinInfos });
    }

And this to the html file:

    function SetMap(addresses) {
    //Create an infobox at the center of the map but don't show it.
    infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
        visible: false
    });

    //Assign the infobox to a map instance.
    infobox.setMap(map);

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

    var pins1 = JSON.stringify(addresses);

    // alert(pins1);

    $.each(JSON.parse(pins1), function (key, pinJson) {


        var position = new Microsoft.Maps.Location(pinJson.lat, pinJson.lng);
        // Creates a Pushpin
        var pin = new Microsoft.Maps.Pushpin(position, { text: pinJson.Title, icon: 'images/map_pin_13.png', typeName: 'sampleCustom' });
        //Store some metadata with the pushpin.
        pin.metadata = {
            title: 'Pin',
            description: 'Discription for pin'
        };
        //Add a click event handler to the pushpin.
        Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
        //Add pushpin to the map.
        map.entities.push(pin);
        pinLayer.push(pin);
    });
}

But it doesn't work, and I can't seem to debug the html form.

So my questions are:

1) Isn't there a way to debug the html part?

2) Where did i go wrong with trying to show the 2 addresses on the map?

Answer 1

A couple of issues in your code:

• You create a pin layer, but are adding the pins directly to the map and the layer. This will cause an issue.
• Your pin layer is using the deprecated EntityCollection class and map.entities. Use map.layers and Microsoft.Maps.Layer
• Pushpin's don't have a typeName option. That was a feature in an old map control and not available in the latest version as rendering happens on an HMTL5 canvas which doesn't support CSS styles.
• Minor thing, but when using a layer, add events to it rather than individual shapes, it helps with performance.

Here is a modified version of your code:

function SetMap(addresses) {
    //Create an infobox at the center of the map but don't show it.
    infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
        visible: false
    });

    //Assign the infobox to a map instance.
    infobox.setMap(map);

    pinLayer = new Microsoft.Maps.Layer();
    map.layers.insert(pinLayer);

    //Add a click event handler to the pin layer.
    Microsoft.Maps.Events.addHandler(pinLayer, 'click', pushpinClicked);

    var pins1 = JSON.stringify(addresses);

    // alert(pins1);

    $.each(JSON.parse(pins1), function (key, pinJson) {


        var position = new Microsoft.Maps.Location(pinJson.lat, pinJson.lng);
        // Creates a Pushpin
        var pin = new Microsoft.Maps.Pushpin(position, { text: pinJson.Title, icon: 'images/map_pin_13.png', typeName: 'sampleCustom' });
        //Store some metadata with the pushpin.
        pin.metadata = {
            title: 'Pin',
            description: 'Discription for pin'
        };

        //Add pushpin to the map.
        pinLayer.add(pin);
    });
}