HTML and CSS Reference
In-Depth Information
eXerCISe 12-4. aDDING a Map
Add the code shown in bold to the body element, which will add the div that the
map will be displayed in:
<div style = "width:800px; height:50px;">
<span id = "lbl"></span>
<div id=“map” style=“width:800px; height:600px;”>
Add the following reference inside the head element. This will enable your page to
call the map APi:
type = "text/javascript"
src = " " >
Add the following declaration at the top of the existing script element. This will
store a reference to the map object.
var map = null;
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) });
Search WWH ::

Custom Search