Chapter 7. Using jQuery UI with Google Maps API

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

Get Mastering jQuery UI now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.