Bing maps can be used in web pages by using Bing
maps API, unlike google maps Bing maps asks user to get registered to access. Later
generate the key for accessing Bing maps. In the below code latitude and latitude
are given to find the specific place in maps. While clicking the pushpin
infobox will show the message.
JavaScript and HTML:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>
<script type="text/javascript">
var map = null, infobox, dataLayer;
function GetMap()
{
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
{
credentials: "Bing Mpas Key",
center: new Microsoft.Maps.Location(0,
29)});
dataLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(dataLayer);
map.setView({ zoom: 5 });
map.entities.push(infoboxLayer);
infobox = new Microsoft.Maps.Infobox();
infoboxLayer.push(infobox);
AddData();
function AddData() {
//Below
is temp data that contains lat , lng and description values.
var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 30));
pin1.Title = "This
is Pin 1";
pin1.Description = "Pin 1 description";
Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
dataLayer.push(pin1);
var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 32));
pin2.Title = "This
is Pin 2";
pin2.Description = "Pin 2 description";
Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
dataLayer.push(pin2);
}
function displayInfobox(e) {
if (e.targetType == 'pushpin') {
infobox.setLocation(e.target.getLocation());
infobox.setOptions({
visible: true,
title: e.target.Title,
description: e.target.Description
});
}
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative;width:600px;height:400px;"></div>
</body>
</html>