asked on

AJAX Bing Maps Control - Adding pushpins from a database

I would like to implement the new AJAX Bing Maps control on our site but I need it to add pushpins from the geocodes located in the database. I have the attached Javascript code that adds a pin on the client side but I'm not sure that's the most efficient way to do it. The control is pretty new, so documentation is fairly scant, but this can't be that hard to do. Hoping someone else has come across this. Our site is on the .NET 3.5 framework using VB.NET

Thanks in advance,

N

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/* Define a style used for infoboxes */
.infobox 
{
 position: absolute;
 border: solid 2px black;
 background-color: White;
 z-index: 1000;
}
</style>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;

function GetMap() {
// Create a new map
map = new Microsoft.Maps.Map(
 document.getElementById("mapDiv"),
 {
  credentials: "AqiytoFcEw3KsI0eSD_vhEhC7x1djyOWcJhPiTeSxuu85fhnPUc3jU-TJRkZ_Db8",
  center: new Microsoft.Maps.Location(35.227396, -80.842257),
  mapTypeId: Microsoft.Maps.MapTypeId.road,
  zoom: 10
 });

// Define first pin
var pin = new Microsoft.Maps.Pushpin(
 new Microsoft.Maps.Location(52.6, 1.26), {
 text: '1 pushpin text here!'
});

// Attach event handlers
Microsoft.Maps.Events.addHandler(pin, 'mouseover', SetInfoBox);
Microsoft.Maps.Events.addHandler(pin, 'mouseout', RemoveInfoBox);

// Add this pushpin to the map
map.entities.push(pin);

// Create an infobox for a pushpin
function SetInfoBox(e) 
{
// Calculate the pixel position of this pushpin relative to the map control
var pointLocation = map.tryLocationToPixel(
  e.target.getLocation(),
  Microsoft.Maps.PixelReference.control
  );
  
// Create a new div
var infodiv = document.createElement("div");
infodiv.id = "infodiv";
infodiv.className = "infobox";

// Place the infobox at the correct pixel coordinates
infodiv.style.left = pointLocation.x;
infodiv.style.top = pointLocation.y;
infodiv.innerHTML =
  "The text of this pushpin is <strong>" + e.target.getText() + "</strong><br/>" +
  "The pushpin is located at <strong>" + e.target.getLocation() + "</strong><br/>";
  
// Add the infobox div as a child to the map
var mapdiv = document.getElementById('mapDiv');
mapdiv.appendChild(infodiv);
}

// Remove the infobox for a pushpin
function RemoveInfoBox(e) {
var mapdiv = document.getElementById('mapDiv');
var infodiv = document.getElementById('infodiv');
if (infodiv != null) { mapdiv.removeChild(infodiv); }
} 
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:640px; height:480px;"></div>    
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

earthware

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

stretch73

ASKER

earthware,

Thanks for the response. I read the page from that link and while it looks like an effective solution it's a bit involved for me as I don't have any WCF experience. We're only talking about 200 locations for our site so really what I need help with is the communication between .NET and the Javascript. Not trying to sound ungrateful here, just don't want to reinvent out data transfer wheel while trying to implement this control.

Kumaraswamy R

This question has been classified as abandoned and is being closed as part of the Cleanup Program. See my comment at the end of the question for more details.