HTML and CSS Reference
In-Depth Information
<script type=”text/javascript” src=”
http://maps.googleapis.com/maps/api/
js?key=<%= ConfigurationManager.AppSettings[“GoogleMapsAPIKey”] %>&
sensor=true”>
</script>
…
<input type="button" id="btnShowCurrent" value="Show Current Location" />
…
<div id="divMap" style="…"></div>
…
</html>
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
