You are here: Home / How to put Bing Maps in your website

How to put Bing Maps in your website

How to add Bing Maps? It is simple and you will be able to do it after reading this tutorial.

  1. You need Windows Live ID
  2. Map Key
  3. Starting with the code

 

In the first place we start with the html structure of our page, !DOCTYPE, title of the page, charset=utf-8 (important to be set to UTF-8), div id=’myMap’ style defining the position and the size of our Bing Map.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:600px; height:600px;"></div>
</html>

Bing Maps

1

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Map Control Reference

4. Adding the map key.

1

map = new Microsoft.Maps.Map(document.getElementById("myMap"), {credentials:"Your Map key here"});

5. Where the position of the map will be showed. We will customize it in the center of the Earth.

1

var center = map.getCenter();

6. It is time for creating the so called infobox

1

pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(1,1), {title: 'Bing Maps: &lt;br&gt; Some text here', visible: false});

7. When the pin of Bing Maps is clicked, what to do?

1

Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);

 

Bing Maps example | See the source code