We made extensive use of the slider in the previous chapter to display a timeline of events. In this chapter, we will create a mashup using some components of jQuery UI along with the Google Maps API.

We will create a page to display the hotels in a particular city. The page will be divided into two columns. On the left-hand side, we will display the list of hotels, and on the right-hand side, we will have a Google map of the city with locations of hotels marked in the map. Clicking on any marker on the map will display an information window with some more details. The end result will resemble the following screenshot:

During this process, you will learn the functionalities of the Google Maps API, along with jQuery UI components. The jQuery UI components that we will use in this chapter are slider, accordion, tabs, and spinner.