Accessing devices and sensors - Build Windows 8 Apps with HTML5 and JavaScript - page 315

You might want to explicitly size the DIV by assigning a width and height. Explicit sizing prevents
the map from covering the entire screen. You'll need some new functions in latLongApp.js . Add the
following function that prepares the ground for displaying the map:
latLongApp.setupMap = function () {
try {
var mapOptions = {
credentials: latLongApp.BingKey,
mapTypeId: Microsoft.Maps.MapTypeId.road,
width: 500,
height: 400
};
var mapDiv = document.getElementById("map");
latLongApp.map = new Microsoft.Maps.Map(mapDiv, mapOptions);
}
catch (e) {
latLongApp.alert(e.message);
}
};
It is key that the width and height properties match the size of the DIV element you plan to use
to display the map. You call this new function from within the callback method invoked when the
coordinates have been retrieved. The latLongApp.display method becomes
latLongApp.display = function (location) {
document.getElementById("lat").innerHTML = location.coordinate.latitude;
document.getElementById("long").innerHTML = location.coordinate.longitude;
// Clear the DIV and set up the map object
document.getElementById("map").innerHTML = "";
latLongApp.setupMap();
// Reference the center of the map and set it to the current location
var mapCenter = latLongApp.map.getCenter();
mapCenter.latitude = location.coordinate.latitude;
mapCenter.longitude = location.coordinate.longitude;
// Set the map view
latLongApp.map.setView({ center: mapCenter, zoom: 16 });
}
What you get this way is already useful, but you can improve it a bit by adding a pushpin to
denote the user's location more clearly. Here's how to add a pushpin:
latLongApp.addPushPin = function (location) {
latLongApp.map.entities.clear();