HTML and CSS Reference
In-Depth Information
<script type=”text/javascript” src=”
js?key=<%= ConfigurationManager.AppSettings[“GoogleMapsAPIKey”] %>&
<input type="button" id="btnShowCurrent" value="Show Current Location" />
<div id="divMap" style="…"></div>
The line of markup shown in bold refers to the Google Maps API library. The URL includes two
mandatory query string parameters: key and sensor . The key query string parameter specifies an API key.
Because the key may change depending on the Google account being used, it isn't embedded in the
markup. Instead, the key is stored in the <appSettings> section of the web.config file and retrieved in the
<%= and %> block. GoogleMapsAPIKey is the name of the key in the <appSettings> section. The sensor query
string parameter indicates whether the device running this web application uses a sensor such as a GPS
locator to determine the user's location.
The other markup in Listing 12-4 is simple and includes an <input> tag that renders the Show Current
Location button and a <div> that acts as a container for the map.
The jQuery code that uses the Google Maps API to display Mumbai when the page loads in the
browser is shown in Listing 12-5.
Listing 12-5. Displaying a Map Using the Google Maps API
var map;
var defaultPos;
$(document).ready(function () {
defaultPos = new google.maps.LatLng(18.916667, 72.9);
var mapOptions = {
center: defaultPos,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map($("#divMap").get(0), mapOptions);
$("#btnShowCurrent").click(function () {
window.navigator.geolocation.getCurrentPosition(OnSuccess, OnError);
This code begins by declaring two global variables named map and defaultPos . The map variable holds
a reference to a Google Map object, whereas the defaultPos variable holds a default position on the map.
The ready() method handler creates a LatLng object provided by the Google Maps API by passing the
latitude and longitude of Mumbai. This LatLng object acts as the default center of the map. The code then
creates a mapOptions object containing configuration settings for the map. The center option defines the
map's center coordinate. The zoom setting affects the map's zoom level. The larger the zoom value, the more
magnified the map is. The mapTypeId setting governs the type of map displayed. The value for mapTypeId
can be assigned from constants such as ROADMAP , SATELLITE , HYBRID , and TERRAIN . The value of ROADMAP
means that a two-dimensional map is displayed. A Map object is then constructed by passing the DOM
Search WWH ::

Custom Search