Multiple Pushpin with infobox in Bing Map

bing-maps pushpin

15,169

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

15,169

AtanuCSE

Happiness is the ultimate goal. Do what you love.

Updated on June 04, 2022

Comments

AtanuCSE about 2 years

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........