Hotel Search using Google Maps JavaScript API v3

By: Prem Tiwari | Last Updated: August 21, 2017 | In: Freebies, Google, Javascript & Ajax

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;

}

Include Java Script File

</script>

Html Code

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.

About: Prem Tiwari

Prem Tiwari is the founder of freewebmentor.com and is a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby. View all posts by Prem Tiwari

Hotel Search using Google Maps JavaScript API v3

Style.css Page

Include Java Script File

Html Code

About: Prem Tiwari

You may also like:

Discount Coupons

Featured eBook

WordPress Security Guide

Popular Categories

Recommended Posts

Pincode Finder

Online Pincode Finder