HTML and CSS Reference
In-Depth Information
Using the Geolocation API with Mapping Applications
One of the common uses of the Geolocation API is integrating mapping services with web applications.
Such integration can be useful for showing the user's location with respect to a set of other locations,
suggesting driving routes, and calculating the distance between two places. The Google Maps and Bing
Maps mapping services are popular and commonly used by developers in web applications. Using these
services involves the following steps:
1.
Obtain an API key from the service provider (Google or Bing).
2.
Refer to the map API library that allows you to program the mapping service in
your web page.
3.
Embed a map into your ASP.NET web application.
4.
Integrate the mapping service with the Geolocation API to customize the map as
per your need.
Google Maps and Bing Maps require that you have an API key to consume their mapping services in
your web application. An API key is allotted for an account, and you can obtain the API key from the
corresponding web site. The examples discussed later in this section assume that you've obtained a valid
API key from the mapping service provider.
Google Maps and Bing Maps allow you to program a map using a JavaScript-based API developed by
the provider. You need to add a reference to this JavaScript library in your web pages to consume its
features. The features exposed by these libraries include showing a particular location on a map, setting a
map's zooming level, showing a callout for a location, and many others. The examples in this section use
some of the libraries' basic features.
Using the JavaScript libraries, you can easily embed a map into your own web page. For example, you
can show a map in a
<div>
element.
The Geolocation API and the mapping services are independent of each other. However, you can
integrate them to provide a better user experience. For example, instead of showing a map of a fixed
location and expecting users to zoom in or out to their location, it's better if by default the map shows the
user's location prominently.
n
Note
The Google Maps API and Bing Maps API expose many programmable features that you can use in a web
application. Detailed discussion of these features is beyond the scope of this topic. This chapter uses Google Maps
and Bing Maps only to the extent of illustrating the integration of the Geolocation API with mapping services. You can
visit the mapping service providers' web sites (
https://developers.google.com/maps
and
www.microsoft.
com/maps/developers/web.aspx
) for
complete documentation.
Integrating the Geolocation API with Google Maps
In this section, you learn to integrate the Geolocation API with Google Maps. Figure 12-4 shows the web
form you develop.
