Multiple Pushpin with infobox in Bing Map

Question

Multiple Pushpin with infobox in Bing Map

15.4k Views Asked by AtanuCSE At 05 April 2025 at 05:05

I am trying to add multiple pushpin with separate infobox. that means each pushpin will have their own infobox with own info. there is a loop.inside that

latlng = new Microsoft.Maps.Location(latitude[pointerCount], longtitue[pointerCount]);
MarkingLocation[pointerCount] = new Microsoft.Maps.Pushpin(latlng, {icon:"marker2.ico", height:50, width:50, anchor:new Microsoft.Maps.Point(0,50)}); 

myInfobox = new Microsoft.Maps.Infobox(latlng, myinfoboxOption);

Microsoft.Maps.Events.addHandler(MarkingLocation[pointerCount], 'click', function() {myInfobox.setOptions({ visible:true });});         
map.entities.push(MarkingLocation[pointerCount]);
map.entities.push(myInfobox);

Problem is that it's showing the last infobox only for every pushpin. Suppose I've 4 pushpin in Londom,France,Germany,America. now no matter which pin I've clicked, it's only show the America infobox on America pushpin.please can anyone help that what I've been missing.........

And one more thing, can anyone please show the way to use htmlContent in infobox. I've tried to set it thrugh option,but it's not woring......

myinfoboxoption = {width:300, 
                              height: 100, 
                              title: str_loc, 
                              htmlContent: htmlc, 
                              showPointer: false, 

                              offset: new Microsoft.Maps.Point(-100,0)};

Please help........

Original Q&A

There are 2 best solutions below

Steven Benjamin On 02 July 2014 at 21:06

Correction: pin.Title = "TITLE: "+ i; //usually title of the infobox

**YoYoMyo** · Accepted Answer

This is how I implemented multiple infobox:

<html>
<head>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
    var pinInfoBox;  //the pop up info box
    var infoboxLayer = new Microsoft.Maps.EntityCollection();
    var pinLayer = new Microsoft.Maps.EntityCollection();
    var apiKey = "YourKey";

    function GetMap() {

        map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: apiKey});

        // Create the info box for the pushpin
        pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
        infoboxLayer.push(pinInfobox);


        for (var i = 0 ; i < 10; i++){
            //add pushpins
            var latLon = new Microsoft.Maps.Location(Math.random()*180-90, Math.random()*360-180);
            var pin = new Microsoft.Maps.Pushpin(latLon);
            pin.Title = name;//usually title of the infobox
            pin.Description = "blahblahblah, "+ i; //information you want to display in the infobox
            pinLayer.push(pin); //add pushpin to pinLayer
            Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
        }

        map.entities.push(pinLayer);
        map.entities.push(infoboxLayer);

    }

    function displayInfobox(e) {
        pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)});
        pinInfobox.setLocation(e.target.getLocation());
    }

    function hideInfobox(e) {
        pinInfobox.setOptions({ visible: false });
    }
</script>

<style>
    #map { position: absolute; top: 20; left: 10; width: 700px; height: 500px; border:#555555 2px solid;}
</style>
</head>
<body onload="GetMap()">
    <div id="map">
    </div>
</body>

In the end, you will get something like this: enter image description here

Multiple Pushpin with infobox in Bing Map

There are 2 best solutions below

Related Questions in BING-MAPS

Related Questions in PUSHPIN

Trending Questions

Popular # Hahtags

Popular Questions