By: Prem Tiwari | Last Updated: | 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.
.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 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; } |
1 2 3 4 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <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> |
Please don’t forget to subscribe our latest updates of blog.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
