Finding Location with the Geolocation API - HTML5 Programming for ASP.NET Developers - page 312

isn't added in the library's URL. Instead, the API key is specified in the map options, as illustrated in Listing
12-7.
Listing 12-7. Displaying a Map Using the Bing Maps API
$(document).ready(function () {
…
defaultPos = new Microsoft.Maps.Location(18.916667, 72.9);
var mapOptions = {
credentials: '<%= ConigurationManager.AppSettings["BingMapsAPIKey"] %>',
center: defaultPos,
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 8
};
map = new Microsoft.Maps.Map($("#divMap").get(0), mapOptions);
…
});
This listing is similar to the previous example. Here, instead of a LatLng object, a Location object is
used to represent a map location. The map options include credentials , center , zoom , and mapTypeId . The
credentials setting holds the Bing Map API key stored in the <appSettings> section of the web.config file.
The other settings are obvious and need no explanation.
The OnSuccess() and OnError() functions this time use an Infobox object to display the location
callout. These functions are shown in Listing 12-8.
Listing 12-8. Using the Infobox Object of the Bing Maps API
function OnSuccess(position) {
var curPos = new Microsoft.Maps.Location(position.coords.latitude,
position.coords.longitude);
var calloutOptions = {title: "Location Information",
description: "This is your current location."};
var callout = new Microsoft.Maps.Infobox(curPos, calloutOptions);
map.entities.push(callout);
}
function OnError(err) {
alert(err.message);
var calloutOptions = {title: "Location Information",
description: "This is the default location."};
var callout = new Microsoft.Maps.Infobox(defaultPos, calloutOptions);
map.entities.push(callout);
}
A new Location object is created based on the user's location. The calloutOptions object holds the
title and description shown in the callout. An Infobox object is created by passing the desired location (the
user's location, in this case) and the calloutOptions object. Finally, the callout is displayed by calling the
push() method of the entities object and passing the Infobox as the parameter. Figure 12-5 shows a map
in Bing Maps.