Multiple Pushpin with infobox in Bing Map
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........
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:
