Hotel Search using Google Maps JavaScript API v3

Today i have shared a simple script to find out Hotel Search using Google Maps JavaScript API v3.
It is simple & easy code of javascript and HTML to get the hotel details.

Features :
One plateform where you can get the most relevent infrmation about the hotel.

Complete Hotel Information.
Working without page refresh.
Display details on Google Map.

More than 10 countries hotels infomation

hotel-api

Style.css Page

html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}    
table {
        font-size: 12px;
      }
      #map-canvas {
        width: 440px;
      }
      #listing {
        position: absolute;
        width: 200px;
        height: 470px;
        overflow: auto;
        left: 442px;
        top: 0px;
        cursor: pointer;
        overflow-x: hidden;
      }
      #findhotels {
        position: absolute;
        text-align: right;
        width: 100px;
        font-size: 14px;
        padding: 4px;
        z-index: 5;
        background-color: #fff;
      }
      #locationField {
        position: absolute;
        width: 190px;
        height: 25px;
        left: 108px;
        top: 0px;
        z-index: 5;
        background-color: #fff;
      }
      #controls {
        position: absolute;
        left: 300px;
        width: 140px;
        top: 0px;
        z-index: 5;
        background-color: #fff;
      }
      #autocomplete {
        width: 100%;
      }
      #country {
        width: 100%;
      }
      .placeIcon {
        width: 20px;
        height: 34px;
        margin: 4px;
      }
      .hotelIcon {
        width: 24px;
        height: 24px;
      }
      #resultsTable {
        border-collapse: collapse;
        width: 240px;
      }
      #rating {
        font-size: 13px;
        font-family: Arial Unicode MS;
      }
      .iw_table_row {
        height: 18px;
      }
      .iw_attribute_name {
        font-weight: bold;
        text-align: right;
      }
      .iw_table_icon {
        text-align: right;
      }

html, body, #map-canvas {

height: 100%;

margin: 0px;

padding: 0px

}

table {

font-size: 12px;

}

#map-canvas {

width: 440px;

}

#listing {

position: absolute;

width: 200px;

height: 470px;

overflow: auto;

left: 442px;

top: 0px;

cursor: pointer;

overflow-x: hidden;

}

#findhotels {

position: absolute;

text-align: right;

width: 100px;

font-size: 14px;

padding: 4px;

z-index: 5;

background-color: #fff;

}

#locationField {

position: absolute;

width: 190px;

height: 25px;

left: 108px;

top: 0px;

z-index: 5;

background-color: #fff;

}

#controls {

position: absolute;

left: 300px;

width: 140px;

top: 0px;

z-index: 5;

background-color: #fff;

}

#autocomplete {

width: 100%;

}

#country {

width: 100%;

}

.placeIcon {

width: 20px;

height: 34px;

margin: 4px;

}

.hotelIcon {

width: 24px;

height: 24px;

}

#resultsTable {

border-collapse: collapse;

width: 240px;

}

#rating {

font-size: 13px;

font-family: Arial Unicode MS;

}

.iw_table_row {

height: 18px;

}

.iw_attribute_name {

font-weight: bold;

text-align: right;

}

.iw_table_icon {

text-align: right;

}

Include Java Script File

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places">
</script>
 <script src="js/fm-script.js" type="text/javascript"></script>

</script>

Html Code

  <body style="margin:0px; padding:0px;" onload="initialize()">

    <div id="findhotels" style="margin:20px;">
      Find hotels in:
    </div>

    <div id="locationField" style="margin:20px;">
      <input id="autocomplete" placeholder="Enter a city" type="text" />
    </div>

    <div id="controls" style="margin:20px;">
      <select id="country">
        <option value="all">All</option>
        <option value="au">Australia</option>
        <option value="br">Brazil</option>
        <option value="ca">Canada</option>
        <option value="fr">France</option>
        <option value="de">Germany</option>
        <option value="mx">Mexico</option>
        <option value="nz">New Zealand</option>
        <option value="it">Italy</option>        
        <option value="za">South Africa</option>
        <option value="es">Spain</option>
        <option value="pt">Portugal</option>
        <option value="us" selected>U.S.A.</option>
        <option value="uk">United Kingdom</option>
      </select>
    </div>

    <div id="map-canvas"></div>

    <div id="listing">
      <table id="resultsTable">
        <tbody id="results"></tbody>
      </table>
    </div>
    
    <div id="info-content">
      <table>
        <tr id="iw-url-row" class="iw_table_row">
          <td id="iw-icon" class="iw_table_icon"></td>
          <td id="iw-url"></td>
        </tr>
        <tr id="iw-address-row" class="iw_table_row">
          <td class="iw_attribute_name">Address:</td>
          <td id="iw-address"></td>
        </tr>
        <tr id="iw-phone-row" class="iw_table_row">
          <td class="iw_attribute_name">Telephone:</td>
          <td id="iw-phone"></td>
        </tr>
        <tr id="iw-rating-row" class="iw_table_row">
          <td class="iw_attribute_name">Rating:</td>
          <td id="iw-rating"></td>
        </tr>
        <tr id="iw-website-row" class="iw_table_row">
          <td class="iw_attribute_name">Website:</td>
          <td id="iw-website"></td>
        </tr>
      </table>
    </div>
  </body>

Find hotels in:

</div>

</div>

<option value="au">Australia</option>

<option value="br">Brazil</option>

<option value="ca">Canada</option>

<option value="fr">France</option>

<option value="de">Germany</option>

<option value="mx">Mexico</option>

<option value="nz">New Zealand</option>

<option value="it">Italy</option>

<option value="za">South Africa</option>

<option value="es">Spain</option>

<option value="pt">Portugal</option>

<option value="uk">United Kingdom</option>

</select>

</div>

</table>

</div>

<table>

</tr>

<td class="iw_attribute_name">Address:</td>

</tr>

<td class="iw_attribute_name">Telephone:</td>

</tr>

<td class="iw_attribute_name">Rating:</td>

</tr>

<td class="iw_attribute_name">Website:</td>

</tr>

</table>

</div>

</body>

Please don’t forget to subscribe our latest updates of blog.

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Hotel Search using Google Maps JavaScript API v3

Style.css Page

Include Java Script File

Html Code

Recommended Posts:

webmentor