bing-mapspushpin

How to Add Images to Infobox? - Bing Maps V8


I would like to add images to my pushpin infoboxes but I am not sure how. I thought maybe htmlContent would do this but then the info box seems to be overwritten.

I really don't want to create a new popout just add images to the existing one. Is this possible?


Solution

  • Use HTML and an img tag, then pass this in as the description value of the infobox. Here is a simple code sample:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'Your Bing Maps Key',
        center: new Microsoft.Maps.Location(47.60357, -122.32945)
    });
    var center = map.getCenter();
    var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
        description: 'Here is my image: <img src="https://www.bingmapsportal.com/Content/images/poi_custom.png" />' });
    infobox.setMap(map);