Post
Ask Question

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/
  
InfoBox1.jpg
 
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:
 
InfoBox2.jpg
 
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: 
 
InfoBox3.jpg
 
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:
  1. <div id='myFirstMap' style="position:relative; width:500px; height:500px;">  
  2. </div> 
After that we take a Button; when we click on the Button the InfoBox will appear:
  1. <input type="button" value="AddDefaultInfobox" /> 
Step 2: Then we write an onload function in the <Body> tag:
  1. <body onload="getMyFirstMap();">  
  2. </body> 
This is used to load the Map. After that we write the JavaScript function:
  1. <script type="text/javascript" src="MyApp.js">  
  2. </script> <script type="text/javascript">  
  3.     var mymap = null;  
  4.     function getMyFirstMap()  
  5.     {  
  6.        mymap = new Microsoft.Maps.Map(document.getElementById('myFirstMap'),  
  7.        {  
  8.        credentials: 'AjOB1Xgle3udoFVOVQB2-5Gfba7VETkypBPHd2RAfkKrkb29wX3e9frf3TwdSoU1'  
  9.        }  
  10.        );  
  11.                                           
  12.      } 
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.
 
InfoBox4.jpg
 
Now we write the function to create an InfoBox on the click of the Button.
  1. <input type="button" value="AddNewInfobox" onclick="addMyInfobox();" /> 
Step 3: Now we write a JavaScript function for InfoBox:
 
function addMyInfobox()
  1. {  
  2.     mymap.entities.clear();  
  3.     var myinfooptions =  
  4.     {  
  5.         title:'My First Infobox', description:'This is my first InfoBox'  
  6. };  
  7.     var mydefaultbox = new Microsoft.Maps.Infobox(mymap.getCenter(), myinfooptions );  
  8.     mymap.entities.push(mydefaultbox);  
  9. } 
 
InfoBox5.jpg
 
Complete Program
  1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4.     <title>Map </title>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <script type="text/javascript" src="MyApp.js"></script>  
  7.     <script type="text/javascript">            var mymap = null;  
  8. function getMyFirstMap()  
  9.  {  
  10.  mymap = new Microsoft.Maps.Map(document.getElementById('myFirstMap'),  
  11.  {  
  12.  credentials: 'AjOB1Xgle3udoFVOVQB2-5Gfba7VETkypBPHd2RAfkKrkb29wX3e9frf3TwdSoU1'  
  13.  });  
  14.  }  
  15.   function addMyInfobox()  
  16.  {  
  17.  mymap.entities.clear();  
  18.  var myinfooptions =  
  19. {  
  20.  title: 'My First Infobox', description: 'This is my first InfoBox'  
  21.  };  
  22.  var mydefaultbox = new Microsoft.Maps.Infobox(mymap.getCenter(), myinfooptions); mymap.entities.push(mydefaultbox);  
  23.  }  
  24. </script>  
  25. </head>  
  26. <body onload="getMyFirstMap();">  
  27.     <div id='myFirstMap' style="position: relative; width: 500px; height: 500px;">  
  28.     </div>  
  29.     <div>  
  30.         <input type="button" value="AddNewInfobox" onclick="addMyInfobox();" />  
  31.     </div>  
  32. </body>  
  33. </html> 


Similar Articles