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
Listing 12-6. OnSuccess() and OnError() Callback Functions
function OnSuccess(position) {
var curPos = new google.maps.LatLng(position.coords.latitude,
var callout = new google.maps.InfoWindow();
callout.setContent("This is your current location.");
function OnError(err) {
var callout = new google.maps.InfoWindow();
callout.setContent("This is the default location.");
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="
mapcontrol.ashx?v=7.0" t ype="text/javascript">
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
Search WWH ::

Custom Search