Displaying the map

This method simply creates the map and stores its reference in myMap.map. We will center it on New Delhi and set its zoom level to the value set in the spinner. The following code will define the options that we will pass to the map, and then call the maps API to display the map:

createMap : function()
{
  var mapOptions =
  {
    center: new google.maps.LatLng(28.637926, 77.223726),
    zoom: parseInt($('#spinner').val(), 10),
    disableDefaultUI : true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
  };
  this.map = new google.maps.Map($("#hotelsMap")[0], mapOptions);
  this.infowindow = new google.maps.InfoWindow();
}

We created an object named mapOptions, where we defined the default values for some properties. Here are the properties we defined:

• center: The Google maps API's LatLng class is used to set the map's center at required coordinates. For this, we pass the latitude and longitude to the LatLng classes constructor. The coordinates provided...