Create InfoBox in Bing Maps in JavaScript

Introduction

In this article, we discuss the use of Bing Maps in JavaScript. In this article, we provide an example of how to create an InfoBox and how to put some details in it.

For this, first we must have a Bing Maps developers account. Which we can create in http://www.bingmapsportal.com/

If we already have a Windows Live Id. We can directly enter (sign in to) it. Otherwise we should create an account.

After that, we fill our account information. And then we click on the Create or View Keys Button, which are in the My Account Tab.

The following window will appear:

Here we fill the Application Name, Application Url (In my case : http:// localhost) and choose the Application Type ( In my case: Developer).

When we click on the Submit Button, the following key will appear:

We use this key in our program as credentials.

Now we start the Program:

Step 1: First we take a div (myfirstmap); this is used for the map in our program:

<div id='myFirstMap' style="position:relative; width:500px; height:500px;">
</div>

After that we take a Button; when we click on the Button the InfoBox will appear:

<input type="button" value="AddDefaultInfobox" />

Step 2: Then we write an onload function in the <Body> tag:

<body onload="getMyFirstMap();">
</body>

This is used to load the Map. After that we write the JavaScript function:

<script type="text/javascript" src="MyApp.js">
</script> <script type="text/javascript">
var mymap = null;
function getMyFirstMap()
{
mymap = new Microsoft.Maps.Map(document.getElementById('myFirstMap'),
{
credentials: 'AjOB1Xgle3udoFVOVQB2-5Gfba7VETkypBPHd2RAfkKrkb29wX3e9frf3TwdSoU1'
}
);
}

Here we use the Bing key as the Credentials. Here we use a js file "MyApp.js". Which is the part of Bing Maps Ajax Control 7.0 ISDK.

Now we write the function to create an InfoBox on the click of the Button.

<input type="button" value="AddNewInfobox" onclick="addMyInfobox();" />

Step 3: Now we write a JavaScript function for InfoBox:

function addMyInfobox()

{
mymap.entities.clear();
var myinfooptions =
{
title:'My First Infobox', description:'This is my first InfoBox'
};
var mydefaultbox = new Microsoft.Maps.Infobox(mymap.getCenter(), myinfooptions );
mymap.entities.push(mydefaultbox);
}

Complete Program

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Map </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="MyApp.js"></script>
<script type="text/javascript"> var mymap = null;
function getMyFirstMap()
{
mymap = new Microsoft.Maps.Map(document.getElementById('myFirstMap'),
{
credentials: 'AjOB1Xgle3udoFVOVQB2-5Gfba7VETkypBPHd2RAfkKrkb29wX3e9frf3TwdSoU1'
});
}
function addMyInfobox()
{
mymap.entities.clear();
var myinfooptions =
{
title: 'My First Infobox', description: 'This is my first InfoBox'
};
var mydefaultbox = new Microsoft.Maps.Infobox(mymap.getCenter(), myinfooptions); mymap.entities.push(mydefaultbox);
}
</script>
</head>
<body onload="getMyFirstMap();">
<div id='myFirstMap' style="position: relative; width: 500px; height: 500px;">
</div>
<div>
<input type="button" value="AddNewInfobox" onclick="addMyInfobox();" />
</div>
</body>
</html>

Create InfoBox in Bing Maps in JavaScript

Reactions

1 Comment

Introduction