Designing the page
The left-hand side of the page will have jQuery UI's slider, spinner, and an accordion. The slider will be used to filter hotels based on price, and the spinner will control the zoom level of the map. The accordion will display the hotels such that the header of each accordion panel will display the hotel name and its content panel will have the hotel price and some description text. Write the following markup in the index.html file to create the HTML structure:
<html>
<head>
<meta charset="utf-8">
<title>Google Maps with jQuery UI</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
</head>
<body>
<div>
<div class="left" >
<div class="ui-state-highlight ui-corner-all" style="padding: 7px;">
<strong>Filter by Price:</strong>
<span id="currentRange"></span>
<div class="clear">...
