How to add multiple pushpins in bing map AJAX control 7.0
HTML
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<body onload="LoadMap();">
<div id="MyMap" class="map"></div>
<textarea id="txtJSON" class="txt_json">[{"Lat":28.633,"Lon":77.219,"Title":"New Delhi, India","Description":"Capital and one of the Historical place of India","title":"leena"},{"Lat":51.48549938466352,"Lon":-0.10674425522154696,"Title":"London, UK","Description":"Beautiful place of England"},{"Lat":55.752478073030616,"Lon":37.624426399075325,"Title":"Moscow, Russia","Description":"Revolutionary place and Capital of Russia"},{"Lat":30.032022566346278,"Lon":31.23587659438783,"Title":"Cairo, Egypt","Description":"A Place of Mysterious Pyramids"},{"Lat":-23.04332469099961,"Lon":-43.17315050522155,"Title":"Rio de Janeiro, Brazil","Description":"Beautiful place of Brazil"},{"Lat":40.685650770389664,"Lon":-74.02275988022154,"Title":"New York City, USA","Description":"One of the coolest city"},{"Lat":37.89307713077123,"Lon":23.78165296157533,"Title":"Athens, Greece","Description":"The City of Modern Civilization"},{"Lat":48.8609324756753,"Lon":2.361059699856578,"Title":"Paris, France","Description":"The City of Love"}]</textarea>
<input id="btAddPusPins" type="button" value="Add Pushpin data" class="btn_add" onclick="AddPushPins();" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
</body>
CSS
.map
{
position:relative;
width:100%;
height:400px;
}
.txt_json
{
background-color: #CCCCCC;
display: block;
min-height: 200px;
width: 500px;
}
.btn_add
{
padding:5px;
background-color:#0094ff;
color:white;
border:1px solid #3c5c74;
}
JavaScript
var map = null;
var InfoBoxEntity = null;
var PushPinsEntity = null;
function AddPushPins() {
var strJSON = document.getElementById('txtJSON');
if (strJSON.value.length == 0) {
alert('Please provide pushpin data in JSON format');
return;
}
try{
var data = JSON.parse(strJSON.value);
SetPushPins(data);
strJSON.value = "";
}
catch (ex) {
alert('ERROR: Please provide valid JSON data');
}
}
function LoadMap() {
map = new Microsoft.Maps.Map(document.getElementById('MyMap'), {
credentials: "AsIc5m_UvaEs-RPaTrw0XRyl9nVaDCPMCqxjdAi_1eQBQXYr8iFtEZ_ttfwwu_7v",
mapTypeId: Microsoft.Maps.MapTypeId.road
});
PushPinsEntity = new Microsoft.Maps.EntityCollection();
map.entities.push(PushPinsEntity);
InfoBoxEntity = new Microsoft.Maps.EntityCollection();
map.entities.push(InfoBoxEntity);
map.setView({
center: new Microsoft.Maps.Location(47.27197080559039, 1.303472656250002),
zoom: 1
});
}
function SetPushPins(PushPinData) {
if (PushPinData.length == 0)
return;
for (var i = 0; i < PushPinData.length; i++) {
var Loc = new Microsoft.Maps.Location(PushPinData[i].Lat, PushPinData[i].Lon);
var Pushpin = new Microsoft.Maps.Pushpin(Loc);
Pushpin.Title = PushPinData[i].Title;
Pushpin.Description = PushPinData[i].Description;
var InfoBox = new Microsoft.Maps.Infobox(Loc, { visible: false, offset: new Microsoft.Maps.Point(0, 30) });
Microsoft.Maps.Events.addHandler(Pushpin, 'mouseover',...