HTML and CSS Reference
In-Depth Information
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"); = new Microsoft.Maps.Map(mapDiv, mapOptions);
catch (e) {
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 = "";
// Reference the center of the map and set it to the current location
var mapCenter =;
mapCenter.latitude = location.coordinate.latitude;
mapCenter.longitude = location.coordinate.longitude;
// Set the map view{ 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) {;
Search WWH ::

Custom Search