Post
Ask Question

How to Get Current Map Style in Bing Maps Using JavaScript

Introduction 

 
Here we can discuss how to get the current map style by programming in JavaScript in Bing Maps. Here we can get and set information in the Map with the help of the Ajax Control 7.0 ISDK.
 
Now we use an example by which we get the map style in an Alert Box.
 
Step 1: For this, first we create a key in Bing maps, which is used as credentials in our program. 
 
Step 2: After that we use a div, where we show the map:
  1. <div id='myfirstMap' style="position:relative; width:500px; height:500px;"></div><div>  
Step 3: After that, we take an Input Button and use an onclick event; when we click on it, it shows an alert box for showing the current map style.
  1. <input type="button" value="My Current Map Style" onclick="getMyMapStyle();" />  
Step 4: We write a function ( onload() ) in the <body> tag.
  1. <body onload="getdatafromMap();">  
  2.         <div id='myfirstMap' style="position: relative; width: 500px; height: 500px;">  
  3.            </div>  
  4.                 <div>  
  5.                    <input type="button" value="My Current Map Style" onclick="getMyMapStyle();" />  
  6.          </div>  
  7. </body> 
Step 5: Now we write onload() function.
  1. function getMyMapStyle()  
  2.     {  
  3.          var x=myfirstmap.getImageryId();  
  4.        alert('My Current Map Style: ' + x);  
  5.      }    
Here we use a Bing map key for credentials.
 
Step 6: Now we write another function which is called when the button is clicked.
  1. function getMyMapStyle()  
  2.     {  
  3.         var x=myfirstmap.getImageryId();  
  4.         alert('My Current Map Style: ' + x);  
  5.     } 
 
img1.png
 
When we click on the Button an alert box will appear.
 
img2.png
 
Complete Program
  1. <html>  
  2. <head>  
  3.     <title>Current Map style</title>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <script type="text/javascript" src="My.js"></script>  
  6.     <script type="text/javascript">  
  7.         var myfirstmap = null;  
  8.         function getdatafromMap() {  
  9.             myfirstmap = new Microsoft.Maps.Map(document.getElementById('myfirstMap'), { credentials: 'AjOB1Xgle3udoFVOVQB2-5Gfba7VETkypBPHd2RAfkKrkb29wX3e9frf3TwdSoU1' });  
  10.         }  
  11.         function getMyMapStyle() {  
  12.             var x = myfirstmap.getImageryId();  
  13.             alert('My Current Map Style: ' + x);  
  14.         }  
  15.  </script>  
  16. </head>  
  17. <body onload="getdatafromMap();">  
  18.     <div id='myfirstMap' style="position: relative; width: 500px; height: 500px;">  
  19.     </div>  
  20.     <div>  
  21.         <input type="button" value="My Current Map Style" onclick="getMyMapStyle();" />  
  22.     </div>  
  23. </body>  
  24. </html> 


Similar Articles