How to integrate Bing map in your website

Introduction

In this post we will see how to add a Bing map in a website. We will center the Map with given Latitude, Longitude and ZoomLevel. We will be using latest Bing Map API “Bing Maps AJAX Control 7.0”. To use Bing Maps API first you need to get a key. Please follow these steps to add a Bing Map to your site

Bing Map

Step:1 Create a Bing Map key(or use existing)

Go to https://www.bingmapsportal.com/application. You need to login to your live account

Create Key - Bing Maps Account Center - Mozilla Firefox_2013-02-03_10-36-28

Fill the form and click on Submit button to get a key. Scroll down to get your created keys

Step:2 Create a new ASP.NET Application or an HTML file and add three TextBoxes, a Button and a container DIV tag to hold the map

div myMap

Step:3 Add following in the script tag to create the map

Bing Map Script

Here, first JavaScript tag loads the libraries used for Bing Maps AJAX Control 7.0

In the second JS tag, a function “GetMap” is created that takes latitude, longitude and zoomLevel as parameters. It centers map to the given latitude/longitude point and zooms it to the given zoomLevel. Inside this function, an object of Microsoft.Maps.Map is created that takes id of the container DIV to show map in it. You need to set the credentials property with your keys. zoom property sets zoom level of the map. setView method of the Map class is used to center map to the given latitude and longitude.

CalGetMap method is created to just call the GetMap function with latitude, longitude and zoomLevel values from TextBoxes on Button’s click.

Step:4 Call GetMap function in onLoad event of the BODY

Body OnLoad

Step:5 Following is the complete HTML code to get the map

<html xmlns="http://www.w3.org/1999/xhtml" >
     <head id="Head1" runat="server">
     <title>Bing Map Example</title>

     <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(latitude, longitude, zoomLevel) {
               map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
                     credentials: "Your Bing Map Key",
                     zoom: zoomLevel
               });

               map.setView({
                    center: new Microsoft.Maps.Location(latitude, longitude)
               });
          }

          function CallGetMap() {
               var latitude = parseInt(document.getElementById('txtLatitude').value);
               var longitude = parseFloat(document.getElementById('txtLongitude').value);
               var zoomLevel = parseFloat(document.getElementById('txtZoomLevel').value);
               GetMap(latitude, longitude, zoomLevel);
          }
     </script>
</head>
<body onload="GetMap(28.3131, 77.1212, 4);">
     <form id="form1" runat="server">
          <div style="float:left;">
               <span style="margin-right:100px;">Latitude</span>
               <span style="margin-right:100px;">Longitude</span>
               <span style="margin-right:100px;">Zoom Level</span>
          </div>
          <div style="clear:both;"/>
          <div style="float:left;margin-bottom:20px;">
               <input id="txtLatitude" type="text" />
               <input id="txtLongitude" type="text" />
               <input id="txtZoomLevel" type="text" />
               <input id="Button1" type="button" value="button" onclick="CallGetMap();" />
          </div>
          <div style="clear:both;" />
          <div id="myMap" style="position:relative; width:600px; height:600px;">
          </div>
     </form>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *