HTML and CSS Reference
In-Depth Information
reference to the
<div>
element that is acting as the map container, and the map options. This displays a
map in the
<div>
element with Mumbai as its center.
The code also shows the
click
event-handler function of the Show Current Position button. The
click
event handler calls the
getCurrentPosition()
method on the
geolocation
object and passes two callback
functions—
OnSuccess()
and
OnError()
—in the parameter.
OnSuccess()
and
OnError()
are shown in Listing
12-6.
Listing 12-6.
OnSuccess()
and
OnError()
Callback Functions
function OnSuccess(position) {
var curPos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(curPos);
var callout = new google.maps.InfoWindow();
callout.setContent("This is your current location.");
callout.setPosition(curPos);
callout.open(map);
}
function OnError(err) {
alert(err.message);
map.setCenter(defaultPos);
var callout = new google.maps.InfoWindow();
callout.setContent("This is the default location.");
callout.setPosition(defaultPos);
callout.open(map);
}
OnSuccess()
creates a new
LatLng
object using the
latitude
and
longitude
properties provided by the
coords
object. This
LatLng
object represents the user's location. The
setCenter()
method of the
map
object
is then used to set the center to the new
LatLng
object. To display a callout to the user pointing to the user's
location, you use an
InfoWindow
object provided by the Google Maps API. The
setContent()
method of the
InfoWindow
object indicates the callout's content. The
setPosition()
method of the
InfoWindow
object
governs the location where the callout is to be placed. Finally, the
open()
method of the
InfoWindow
object
shows the callout on the specified
map
object.
OnError()
is similar to
OnSuccess()
but is called in the event of an error while retrieving the user's
location.
OnError()
displays an error message to the user and displays a callout at the default position
(Mumbai, in this case).
Integrating the Geolocation API with Bing Maps
The process of integrating the Geolocation API with Bing Maps is similar to that used for Google Maps.
This time, however, you need to use the Bing Maps API and the corresponding API key. The following line
of markup shows how to reference the Bing Maps API in a web page:
<script src="
http://dev.virtualearth.net/mapcontrol/
mapcontrol.ashx?v=7.0" t
ype="text/javascript">
</script>
Note that the Bing Maps documentation refers this library as an Ajax control but it's actually a
JavaScript library and can be referenced using the normal
<script>
tag as shown. This time, the API key
