Mastering jQuery UI

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 ...