Getting started with the Bing Maps AJAX Control

  • Article

The Bing Maps AJAX Control (currently on version 7.0), is ideally a JavaScript control containing the objects, methods and events that allow you to incorporate Bing Maps into your application.

In this blog post, we look at how to add a basic map onto your web page using Bing Maps AJAX Control.

Step 1: Create a Bing Maps Account and get a Bing Maps Key

Before you begin developing your application, you need to create a developer account on the Bing Maps Account Center. A Bing Maps Developer Account allows you to create a Bing Maps Key to use in your map application.

  1. Go to the Bing Maps Account Center https://www.bingmapsportal.com/
  2. You will need to sign in with your Windows LiveID (if you don’t have one, there’s a provision for creating one).
  3. Setup your account details
  4. Under My Account, click on Create or View Keys
  5. Under My Keys, enter the required information for the application that will use the Bing Maps Key i.e. Application Name, Application URL, Key Type (Trial, Basic or Enterprise) and the Application Type.
  6. Click on Submit. You will get a new key under list of available keys. We shall use this key to authenticate our Bing Maps application.

Step 2: Add a map control to your web page

We then need to come up with a basic web page to incorporate our map.

At the header section, we include a reference to the map control as follows

<script src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

 We then need to create a DIV element on the page that will hold the map. You can setup the styling as you may deem fit.

<div id='mapDiv' style="position:relative; width:800px; height:600px;"></div>      

 Lastly, we create the JavaScript GetMap() function which will contain an instance of the map class and other map options.

The full code will then appear as follows. Keep in mind the fact that you need to replace the BING_MAPS_KEY string with the actual key that you got from the Bing Maps Account Center.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Getting Started: Bing Maps AJAX Control</title>

    <script src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    <script type="text/javascript">

        function GetMap()

        {  

            var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),

            {

credentials: "BING_MAPS_KEY",

                   center: new Microsoft.Maps.Location(-1.290853, 36.788551),

                   mapTypeId: Microsoft.Maps.MapTypeId.road,

                   zoom: 14

            });

        }

    </script>

</head>

<body onload="GetMap();">

    <div id='mapDiv' style="position:relative; width:800px; height:600px;"></div>      

</body>

</html>

Your basic web page is now ready for display. The output will be as follows:

You can add lots of customizations to your map as you go along. The Bing Maps AJAX Control 7.0. Interactive SDK contains code snippets and feature samples that will get you started on possible customizations.