HTML and CSS Reference
In-Depth Information
eXerCISe 12-4. aDDING a Map
1.
Add the
code
shown in bold to the
body
element, which will add the
div
that the
map will be displayed in:
<body>
<div style = "width:800px; height:50px;">
<span id = "lbl"></span>
</div>
<div id=“map” style=“width:800px; height:600px;”>
</div>
2.
Add the following reference inside the
head
element. This will enable your page to
call the map APi:
<script
type = "text/javascript"
</script>
3.
Add the following declaration at the top of the existing
script
element. This will
store a reference to the map object.
var map = null;
4.
Modify the
showLocation()
function, adding the code shown in bold in listing 12-2.
Enter your Bing Maps key where is says <use your key here>. The key should be
enclosed in double quotes.
Listing 12-2.
The modified showLocation() function
function showLocation(pos) {
lbl.innerHTML =
"Your latitude: " + pos.coords.latitude +
" and longitude: " + pos.coords.longitude +
" (Accuracy of: " + pos.coords.accuracy + " meters)";
// Save the current location
var lat = pos.coords.latitude;
var long = pos.coords.longitude;
// Create the map
map = new Microsoft.Maps.Map(document.getElementById("map"),
{ credentials:
"<use your key here>" });
// Center it on the current location
map.setView({ zoom: 18, center: new Microsoft.Maps.Location(lat, long) });
}
