The AJAX Control is a JavaScript library that adds a fully functional map to a web page. The current version, V7, released in 2010, was written with a modular approach in mind, which reduced the core part of the library to around 35 KB. Additional modules, such as the directions module, or the ones we will write in this chapter, can be loaded dynamically on request.
In this chapter, we are going to place a map on our webpage, and customize its look. First, let's create a simple HTML5 index.html file, as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>LBM | Chapter 1: Introduction to Bing Maps</title>
</head>
<body>
</body>
</html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Microsoft recommends using UTF-8 encoding on the page. To load the control, we add the script tag to the header, as shown in the following code snippet:
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
Now, let's add the div element that will contain the map in the body, as shown in the following code snippet:
<div id="lbm-map"></div>
We need to style our div with height and width, so let's add an external stylesheet to our page, which now should look as shown in the following code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>LBM | Chapter 1: Introduction to Bing Maps</title>
<link href="app.css" rel="stylesheet" />
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
</head>
<body>
<div id="lbm-map"></div>
</body>
</html>The width and height of the map container will be used by the AJAX Control to resize the map. The container must also be styled with relative or absolute position. So, let's code them in our stylesheet file, as follows:
#lbm-map {
position: relative;
width: 100%;
margin: 20px auto;
border: 1px solid #888;
}We have used Learning Bing Maps (LBM) to prefix our styles.
Now, let's write the function that instantiates the map on page load in a app.js JavaScript file as shown in the following code:
window.onload = function() {
var container = document.getElementById('lbm-map'),
resize = function () { container.style.height = window.innerHeight + 'px'; };
resize();
var map = new Microsoft.Maps.Map(container, {
credentials: '[YOUR BING MAPS KEY]',
center: new Microsoft.Maps.Location(39.554883, -99.052734),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 4
});
window.onresize = function() {
resize()
};
};First, we get a reference to the map container and store it in a container variable for later use. Since we want our map to cover the whole browser window, we give our container the same height as the window (we already specified the width value as 100 percent).
The main function (we will also refer to them as
classes, even though this term is not supported as such in JavaScript) of the AJAX Control is named Microsoft.Maps.Map, and accepts two arguments—the first argument is a reference to the DOM element of the map container and the second argument is a Microsoft.Maps.MapOptions object—used to customize the map.
One of the important properties of the
MapOptions object is credentials, and it holds the Bing Maps key. Other properties control the view of the map, such as the zoom level, the background color, the default controls; or the map's behavior, such as panning, user clicks or touches, keyboard input, and so on (the full reference of MapOptions can be found at http://msdn.microsoft.com/en-us/library/gg427603.aspx). Please note that Microsoft.Maps is the namespace that groups all the JavaScript classes of the control.
Going back to our code, at the end of it, we make sure the map is resized to fill the whole window, even when the user resizes the browser window. Note how the map follows the dimensions of its container.
We need to add a reference to this file on our index.html page, and we place the reference just before the closing </body> tag, so that the file is loaded after all the other assets of the page have been downloaded by the browser.
<script src="app.js"></script>
If we open the index.html file on the browser, we should get the map as shown in the following figure:
The map is centered somewhere in Kansas, United States. To do this, we set the center option to a Microsoft.Maps.Location instance, which accepts two parameters: latitude and longitude.
new Microsoft.Maps.Location(39.554883, -99.052734)
The zoom option can take any value between 1 and 20, with 1 zooming out far and 20 zooming in close. The mapTypeId property is a value of
Microsoft.Maps.MapTypeId, which includes aerial, birdseye, and so on. (The list can be found at http://msdn.microsoft.com/en-us/library/gg427625.aspx).
Now, let's remove the map's dashboard, the controls at the top-right corner of the map, and replace them with our own. To achieve the former, we add two more options to our map instantiation function, as shown in the following code snippet:
var map = new Microsoft.Maps.Map(document.getElementById('lbm-map'), {
credentials: '[YOUR BING MAPS KEY]',
center: new Microsoft.Maps.Location(39.554883, -99.052734),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 4,
showBreadcrumb: false,
showDashboard: false
});