Place Autocomplete Hotel Search<\/title>\r\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\r\n <meta charset=\"utf-8\">\r\n <style>\r\n \/* Always set the map height explicitly to define the size of the div\r\n * element that contains the map. *\/\r\n #map {\r\n height: 100%;\r\n }\r\n \/* Optional: Makes the sample page fill the window. *\/\r\n html, body {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n body {\r\n padding: 0 !important;\r\n }\r\n table {\r\n font-size: 12px;\r\n }\r\n .hotel-search {\r\n -webkit-box-align: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n background: #fff;\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n display: flex;\r\n left: 0;\r\n position: absolute;\r\n top: 0;\r\n width: 440px;\r\n z-index: 1;\r\n }\r\n #map {\r\n margin-top: 40px;\r\n width: 440px;\r\n }\r\n #listing {\r\n position: absolute;\r\n width: 200px;\r\n height: 470px;\r\n overflow: auto;\r\n left: 442px;\r\n top: 0px;\r\n cursor: pointer;\r\n overflow-x: hidden;\r\n }\r\n #findhotels {\r\n font-size: 14px;\r\n }\r\n #locationField {\r\n -webkit-box-flex: 1 1 190px;\r\n -ms-flex: 1 1 190px;\r\n flex: 1 1 190px;\r\n margin: 0 8px;\r\n }\r\n #controls {\r\n -webkit-box-flex: 1 1 140px;\r\n -ms-flex: 1 1 140px;\r\n flex: 1 1 140px;\r\n }\r\n #autocomplete {\r\n width: 100%;\r\n }\r\n #country {\r\n width: 100%;\r\n }\r\n .placeIcon {\r\n width: 20px;\r\n height: 34px;\r\n margin: 4px;\r\n }\r\n .hotelIcon {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n #resultsTable {\r\n border-collapse: collapse;\r\n width: 240px;\r\n }\r\n #rating {\r\n font-size: 13px;\r\n font-family: Arial Unicode MS;\r\n }\r\n .iw_table_row {\r\n height: 18px;\r\n }\r\n .iw_attribute_name {\r\n font-weight: bold;\r\n text-align: right;\r\n }\r\n .iw_table_icon {\r\n text-align: right;\r\n }\r\n <\/style>\r\n <\/head>\r\n\r\n <body>\r\n\r\n <div class=\"hotel-search\">\r\n <div id=\"findhotels\">\r\n Find hotels in:\r\n <\/div>\r\n\r\n <div id=\"locationField\">\r\n <input id=\"autocomplete\" placeholder=\"Enter a city\" type=\"text\" \/>\r\n <\/div>\r\n\r\n <div id=\"controls\">\r\n <select id=\"country\">\r\n <option value=\"all\">All<\/option>\r\n <option value=\"au\">Australia<\/option>\r\n <option value=\"br\">Brazil<\/option>\r\n <option value=\"ca\">Canada<\/option>\r\n <option value=\"fr\">France<\/option>\r\n <option value=\"de\">Germany<\/option>\r\n <option value=\"mx\">Mexico<\/option>\r\n <option value=\"nz\">New Zealand<\/option>\r\n <option value=\"it\">Italy<\/option>\r\n <option value=\"za\">South Africa<\/option>\r\n <option value=\"es\">Spain<\/option>\r\n <option value=\"pt\">Portugal<\/option>\r\n <option value=\"us\" selected>U.S.A.<\/option>\r\n <option value=\"uk\">United Kingdom<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"map\"><\/div>\r\n\r\n <div id=\"listing\">\r\n <table id=\"resultsTable\">\r\n <tbody id=\"results\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div style=\"display: none\">\r\n <div id=\"info-content\">\r\n <table>\r\n <tr id=\"iw-url-row\" class=\"iw_table_row\">\r\n <td id=\"iw-icon\" class=\"iw_table_icon\"><\/td>\r\n <td id=\"iw-url\"><\/td>\r\n <\/tr>\r\n <tr id=\"iw-address-row\" class=\"iw_table_row\">\r\n <td class=\"iw_attribute_name\">Address:<\/td>\r\n <td id=\"iw-address\"><\/td>\r\n <\/tr>\r\n <tr id=\"iw-phone-row\" class=\"iw_table_row\">\r\n <td class=\"iw_attribute_name\">Telephone:<\/td>\r\n <td id=\"iw-phone\"><\/td>\r\n <\/tr>\r\n <tr id=\"iw-rating-row\" class=\"iw_table_row\">\r\n <td class=\"iw_attribute_name\">Rating:<\/td>\r\n <td id=\"iw-rating\"><\/td>\r\n <\/tr>\r\n <tr id=\"iw-website-row\" class=\"iw_table_row\">\r\n <td class=\"iw_attribute_name\">Website:<\/td>\r\n <td id=\"iw-website\"><\/td>\r\n <\/tr>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ This example uses the autocomplete feature of the Google Places API.\r\n \/\/ It allows the user to find all hotels in a given place, within a given\r\n \/\/ country. It then displays markers for all the hotels returned,\r\n \/\/ with on-click details for each hotel.\r\n\r\n \/\/ This example requires the Places library. Include the libraries=places\r\n \/\/ parameter when you first load the API. For example:\r\n \/\/ <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&libraries=places\">\r\n\r\n var map, places, infoWindow;\r\n var markers = [];\r\n var autocomplete;\r\n var countryRestrict = {'country': 'us'};\r\n var MARKER_PATH = 'https:\/\/developers.google.com\/maps\/documentation\/javascript\/images\/marker_green';\r\n var hostnameRegexp = new RegExp('^https?:\/\/.+?\/');\r\n\r\n var countries = {\r\n 'au': {\r\n center: {lat: -25.3, lng: 133.8},\r\n zoom: 4\r\n },\r\n 'br': {\r\n center: {lat: -14.2, lng: -51.9},\r\n zoom: 3\r\n },\r\n 'ca': {\r\n center: {lat: 62, lng: -110.0},\r\n zoom: 3\r\n },\r\n 'fr': {\r\n center: {lat: 46.2, lng: 2.2},\r\n zoom: 5\r\n },\r\n 'de': {\r\n center: {lat: 51.2, lng: 10.4},\r\n zoom: 5\r\n },\r\n 'mx': {\r\n center: {lat: 23.6, lng: -102.5},\r\n zoom: 4\r\n },\r\n 'nz': {\r\n center: {lat: -40.9, lng: 174.9},\r\n zoom: 5\r\n },\r\n 'it': {\r\n center: {lat: 41.9, lng: 12.6},\r\n zoom: 5\r\n },\r\n 'za': {\r\n center: {lat: -30.6, lng: 22.9},\r\n zoom: 5\r\n },\r\n 'es': {\r\n center: {lat: 40.5, lng: -3.7},\r\n zoom: 5\r\n },\r\n 'pt': {\r\n center: {lat: 39.4, lng: -8.2},\r\n zoom: 6\r\n },\r\n 'us': {\r\n center: {lat: 37.1, lng: -95.7},\r\n zoom: 3\r\n },\r\n 'uk': {\r\n center: {lat: 54.8, lng: -4.6},\r\n zoom: 5\r\n }\r\n };\r\n\r\n function initMap() {\r\n map = new google.maps.Map(document.getElementById('map'), {\r\n zoom: countries['us'].zoom,\r\n center: countries['us'].center,\r\n mapTypeControl: false,\r\n panControl: false,\r\n zoomControl: false,\r\n streetViewControl: false\r\n });\r\n\r\n infoWindow = new google.maps.InfoWindow({\r\n content: document.getElementById('info-content')\r\n });\r\n\r\n \/\/ Create the autocomplete object and associate it with the UI input control.\r\n \/\/ Restrict the search to the default country, and to place type \"cities\".\r\n autocomplete = new google.maps.places.Autocomplete(\r\n \/** @type {!HTMLInputElement} *\/ (\r\n document.getElementById('autocomplete')), {\r\n types: ['(cities)'],\r\n componentRestrictions: countryRestrict\r\n });\r\n places = new google.maps.places.PlacesService(map);\r\n\r\n autocomplete.addListener('place_changed', onPlaceChanged);\r\n\r\n \/\/ Add a DOM event listener to react when the user selects a country.\r\n document.getElementById('country').addEventListener(\r\n 'change', setAutocompleteCountry);\r\n }\r\n\r\n \/\/ When the user selects a city, get the place details for the city and\r\n \/\/ zoom the map in on the city.\r\n function onPlaceChanged() {\r\n var place = autocomplete.getPlace();\r\n if (place.geometry) {\r\n map.panTo(place.geometry.location);\r\n map.setZoom(15);\r\n search();\r\n } else {\r\n document.getElementById('autocomplete').placeholder = 'Enter a city';\r\n }\r\n }\r\n\r\n \/\/ Search for hotels in the selected city, within the viewport of the map.\r\n function search() {\r\n var search = {\r\n bounds: map.getBounds(),\r\n types: ['lodging']\r\n };\r\n\r\n places.nearbySearch(search, function(results, status) {\r\n if (status === google.maps.places.PlacesServiceStatus.OK) {\r\n clearResults();\r\n clearMarkers();\r\n \/\/ Create a marker for each hotel found, and\r\n \/\/ assign a letter of the alphabetic to each marker icon.\r\n for (var i = 0; i < results.length; i++) {\r\n var markerLetter = String.fromCharCode('A'.charCodeAt(0) + (i % 26));\r\n var markerIcon = MARKER_PATH + markerLetter + '.png';\r\n \/\/ Use marker animation to drop the icons incrementally on the map.\r\n markers[i] = new google.maps.Marker({\r\n position: results[i].geometry.location,\r\n animation: google.maps.Animation.DROP,\r\n icon: markerIcon\r\n });\r\n \/\/ If the user clicks a hotel marker, show the details of that hotel\r\n \/\/ in an info window.\r\n markers[i].placeResult = results[i];\r\n google.maps.event.addListener(markers[i], 'click', showInfoWindow);\r\n setTimeout(dropMarker(i), i * 100);\r\n addResult(results[i], i);\r\n }\r\n }\r\n });\r\n }\r\n\r\n function clearMarkers() {\r\n for (var i = 0; i < markers.length; i++) {\r\n if (markers[i]) {\r\n markers[i].setMap(null);\r\n }\r\n }\r\n markers = [];\r\n }\r\n\r\n \/\/ Set the country restriction based on user input.\r\n \/\/ Also center and zoom the map on the given country.\r\n function setAutocompleteCountry() {\r\n var country = document.getElementById('country').value;\r\n if (country == 'all') {\r\n autocomplete.setComponentRestrictions({'country': []});\r\n map.setCenter({lat: 15, lng: 0});\r\n map.setZoom(2);\r\n } else {\r\n autocomplete.setComponentRestrictions({'country': country});\r\n map.setCenter(countries[country].center);\r\n map.setZoom(countries[country].zoom);\r\n }\r\n clearResults();\r\n clearMarkers();\r\n }\r\n\r\n function dropMarker(i) {\r\n return function() {\r\n markers[i].setMap(map);\r\n };\r\n }\r\n\r\n function addResult(result, i) {\r\n var results = document.getElementById('results');\r\n var markerLetter = String.fromCharCode('A'.charCodeAt(0) + (i % 26));\r\n var markerIcon = MARKER_PATH + markerLetter + '.png';\r\n\r\n var tr = document.createElement('tr');\r\n tr.style.backgroundColor = (i % 2 === 0 ? '#F0F0F0' : '#FFFFFF');\r\n tr.onclick = function() {\r\n google.maps.event.trigger(markers[i], 'click');\r\n };\r\n\r\n var iconTd = document.createElement('td');\r\n var nameTd = document.createElement('td');\r\n var icon = document.createElement('img');\r\n icon.src = markerIcon;\r\n icon.setAttribute('class', 'placeIcon');\r\n icon.setAttribute('className', 'placeIcon');\r\n var name = document.createTextNode(result.name);\r\n iconTd.appendChild(icon);\r\n nameTd.appendChild(name);\r\n tr.appendChild(iconTd);\r\n tr.appendChild(nameTd);\r\n results.appendChild(tr);\r\n }\r\n\r\n function clearResults() {\r\n var results = document.getElementById('results');\r\n while (results.childNodes[0]) {\r\n results.removeChild(results.childNodes[0]);\r\n }\r\n }\r\n\r\n \/\/ Get the place details for a hotel. Show the information in an info window,\r\n \/\/ anchored on the marker for the hotel that the user selected.\r\n function showInfoWindow() {\r\n var marker = this;\r\n places.getDetails({placeId: marker.placeResult.place_id},\r\n function(place, status) {\r\n if (status !== google.maps.places.PlacesServiceStatus.OK) {\r\n return;\r\n }\r\n infoWindow.open(map, marker);\r\n buildIWContent(place);\r\n });\r\n }\r\n\r\n \/\/ Load the place information into the HTML elements used by the info window.\r\n function buildIWContent(place) {\r\n document.getElementById('iw-icon').innerHTML = '<img class=\"hotelIcon\" ' +\r\n 'src=\"' + place.icon + '\"\/>';\r\n document.getElementById('iw-url').innerHTML = '<b><a href=\"' + place.url +\r\n '\">' + place.name + '<\/a><\/b>';\r\n document.getElementById('iw-address').textContent = place.vicinity;\r\n\r\n if (place.formatted_phone_number) {\r\n document.getElementById('iw-phone-row').style.display = '';\r\n document.getElementById('iw-phone').textContent =\r\n place.formatted_phone_number;\r\n } else {\r\n document.getElementById('iw-phone-row').style.display = 'none';\r\n }\r\n\r\n \/\/ Assign a five-star rating to the hotel, using a black star ('✭')\r\n \/\/ to indicate the rating the hotel has earned, and a white star ('✩')\r\n \/\/ for the rating points not achieved.\r\n if (place.rating) {\r\n var ratingHtml = '';\r\n for (var i = 0; i < 5; i++) {\r\n if (place.rating < (i + 0.5)) {\r\n ratingHtml += '✩';\r\n } else {\r\n ratingHtml += '✭';\r\n }\r\n document.getElementById('iw-rating-row').style.display = '';\r\n document.getElementById('iw-rating').innerHTML = ratingHtml;\r\n }\r\n } else {\r\n document.getElementById('iw-rating-row').style.display = 'none';\r\n }\r\n\r\n \/\/ The regexp isolates the first part of the URL (domain plus subdomain)\r\n \/\/ to give a short URL for displaying in the info window.\r\n if (place.website) {\r\n var fullUrl = place.website;\r\n var website = hostnameRegexp.exec(place.website);\r\n if (website === null) {\r\n website = 'http:\/\/' + place.website + '\/';\r\n fullUrl = website;\r\n }\r\n document.getElementById('iw-website-row').style.display = '';\r\n document.getElementById('iw-website').textContent = website;\r\n } else {\r\n document.getElementById('iw-website-row').style.display = 'none';\r\n }\r\n }\r\n <\/script>\r\n <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?v=3.exp&sensor=false&key=AIzaSyCFpP_miS6kjjBCJdHj-OjCKcu-CVhgypo\"><\/script> \r\n <script>\r\n \/\/ This example uses the autocomplete feature of the Google Places API.\r\n\/\/ It allows the user to find all hotels in a given place, within a given\r\n\/\/ country. It then displays markers for all the hotels returned,\r\n\/\/ with on-click details for each hotel.\r\n\/\/ This example requires the Places library. Include the libraries=places\r\n\/\/ parameter when you first load the API. For example:\r\n\/\/ <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&libraries=places\">\r\nlet map;\r\nlet places;\r\nlet infoWindow;\r\nlet markers = [];\r\nlet autocomplete;\r\nconst countryRestrict = { country: \"us\" };\r\nconst MARKER_PATH =\r\n \"https:\/\/developers.google.com\/maps\/documentation\/javascript\/images\/marker_green\";\r\nconst hostnameRegexp = new RegExp(\"^https?:\/\/.+?\/\");\r\nconst countries = {\r\n au: {\r\n center: { lat: -25.3, lng: 133.8 },\r\n zoom: 4,\r\n },\r\n br: {\r\n center: { lat: -14.2, lng: -51.9 },\r\n zoom: 3,\r\n },\r\n ca: {\r\n center: { lat: 62, lng: -110.0 },\r\n zoom: 3,\r\n },\r\n fr: {\r\n center: { lat: 46.2, lng: 2.2 },\r\n zoom: 5,\r\n },\r\n de: {\r\n center: { lat: 51.2, lng: 10.4 },\r\n zoom: 5,\r\n },\r\n mx: {\r\n center: { lat: 23.6, lng: -102.5 },\r\n zoom: 4,\r\n },\r\n nz: {\r\n center: { lat: -40.9, lng: 174.9 },\r\n zoom: 5,\r\n },\r\n it: {\r\n center: { lat: 41.9, lng: 12.6 },\r\n zoom: 5,\r\n },\r\n za: {\r\n center: { lat: -30.6, lng: 22.9 },\r\n zoom: 5,\r\n },\r\n es: {\r\n center: { lat: 40.5, lng: -3.7 },\r\n zoom: 5,\r\n },\r\n pt: {\r\n center: { lat: 39.4, lng: -8.2 },\r\n zoom: 6,\r\n },\r\n us: {\r\n center: { lat: 37.1, lng: -95.7 },\r\n zoom: 3,\r\n },\r\n uk: {\r\n center: { lat: 54.8, lng: -4.6 },\r\n zoom: 5,\r\n },\r\n};\r\n\r\nfunction initMap() {\r\n map = new google.maps.Map(document.getElementById(\"map\"), {\r\n zoom: countries[\"us\"].zoom,\r\n center: countries[\"us\"].center,\r\n mapTypeControl: false,\r\n panControl: false,\r\n zoomControl: false,\r\n streetViewControl: false,\r\n });\r\n infoWindow = new google.maps.InfoWindow({\r\n content: document.getElementById(\"info-content\"),\r\n });\r\n \/\/ Create the autocomplete object and associate it with the UI input control.\r\n \/\/ Restrict the search to the default country, and to place type \"cities\".\r\n autocomplete = new google.maps.places.Autocomplete(\r\n document.getElementById(\"autocomplete\"),\r\n {\r\n types: [\"(cities)\"],\r\n componentRestrictions: countryRestrict,\r\n fields: [\"geometry\"],\r\n }\r\n );\r\n places = new google.maps.places.PlacesService(map);\r\n autocomplete.addListener(\"place_changed\", onPlaceChanged);\r\n \/\/ Add a DOM event listener to react when the user selects a country.\r\n document\r\n .getElementById(\"country\")\r\n .addEventListener(\"change\", setAutocompleteCountry);\r\n}\r\n\r\n\/\/ When the user selects a city, get the place details for the city and\r\n\/\/ zoom the map in on the city.\r\nfunction onPlaceChanged() {\r\n const place = autocomplete.getPlace();\r\n\r\n if (place.geometry && place.geometry.location) {\r\n map.panTo(place.geometry.location);\r\n map.setZoom(15);\r\n search();\r\n } else {\r\n document.getElementById(\"autocomplete\").placeholder = \"Enter a city\";\r\n }\r\n}\r\n\r\n\/\/ Search for hotels in the selected city, within the viewport of the map.\r\nfunction search() {\r\n const search = {\r\n bounds: map.getBounds(),\r\n types: [\"lodging\"],\r\n };\r\n\r\n places.nearbySearch(search, (results, status, pagination) => {\r\n if (status === google.maps.places.PlacesServiceStatus.OK && results) {\r\n clearResults();\r\n clearMarkers();\r\n\r\n \/\/ Create a marker for each hotel found, and\r\n \/\/ assign a letter of the alphabetic to each marker icon.\r\n for (let i = 0; i < results.length; i++) {\r\n const markerLetter = String.fromCharCode(\"A\".charCodeAt(0) + (i % 26));\r\n const markerIcon = MARKER_PATH + markerLetter + \".png\";\r\n\r\n \/\/ Use marker animation to drop the icons incrementally on the map.\r\n markers[i] = new google.maps.Marker({\r\n position: results[i].geometry.location,\r\n animation: google.maps.Animation.DROP,\r\n icon: markerIcon,\r\n });\r\n \/\/ If the user clicks a hotel marker, show the details of that hotel\r\n \/\/ in an info window.\r\n \/\/ @ts-ignore TODO refactor to avoid storing on marker\r\n markers[i].placeResult = results[i];\r\n google.maps.event.addListener(markers[i], \"click\", showInfoWindow);\r\n setTimeout(dropMarker(i), i * 100);\r\n addResult(results[i], i);\r\n }\r\n }\r\n });\r\n}\r\n\r\nfunction clearMarkers() {\r\n for (let i = 0; i < markers.length; i++) {\r\n if (markers[i]) {\r\n markers[i].setMap(null);\r\n }\r\n }\r\n\r\n markers = [];\r\n}\r\n\r\n\/\/ Set the country restriction based on user input.\r\n\/\/ Also center and zoom the map on the given country.\r\nfunction setAutocompleteCountry() {\r\n const country = document.getElementById(\"country\").value;\r\n\r\n if (country == \"all\") {\r\n autocomplete.setComponentRestrictions({ country: [] });\r\n map.setCenter({ lat: 15, lng: 0 });\r\n map.setZoom(2);\r\n } else {\r\n autocomplete.setComponentRestrictions({ country: country });\r\n map.setCenter(countries[country].center);\r\n map.setZoom(countries[country].zoom);\r\n }\r\n\r\n clearResults();\r\n clearMarkers();\r\n}\r\n\r\nfunction dropMarker(i) {\r\n return function () {\r\n markers[i].setMap(map);\r\n };\r\n}\r\n\r\nfunction addResult(result, i) {\r\n const results = document.getElementById(\"results\");\r\n const markerLetter = String.fromCharCode(\"A\".charCodeAt(0) + (i % 26));\r\n const markerIcon = MARKER_PATH + markerLetter + \".png\";\r\n const tr = document.createElement(\"tr\");\r\n\r\n tr.style.backgroundColor = i % 2 === 0 ? \"#F0F0F0\" : \"#FFFFFF\";\r\n tr.onclick = function () {\r\n google.maps.event.trigger(markers[i], \"click\");\r\n };\r\n\r\n const iconTd = document.createElement(\"td\");\r\n const nameTd = document.createElement(\"td\");\r\n const icon = document.createElement(\"img\");\r\n\r\n icon.src = markerIcon;\r\n icon.setAttribute(\"class\", \"placeIcon\");\r\n icon.setAttribute(\"className\", \"placeIcon\");\r\n\r\n const name = document.createTextNode(result.name);\r\n\r\n iconTd.appendChild(icon);\r\n nameTd.appendChild(name);\r\n tr.appendChild(iconTd);\r\n tr.appendChild(nameTd);\r\n results.appendChild(tr);\r\n}\r\n\r\nfunction clearResults() {\r\n const results = document.getElementById(\"results\");\r\n\r\n while (results.childNodes[0]) {\r\n results.removeChild(results.childNodes[0]);\r\n }\r\n}\r\n\r\n\/\/ Get the place details for a hotel. Show the information in an info window,\r\n\/\/ anchored on the marker for the hotel that the user selected.\r\nfunction showInfoWindow() {\r\n \/\/ @ts-ignore\r\n const marker = this;\r\n\r\n places.getDetails(\r\n { placeId: marker.placeResult.place_id },\r\n (place, status) => {\r\n if (status !== google.maps.places.PlacesServiceStatus.OK) {\r\n return;\r\n }\r\n\r\n infoWindow.open(map, marker);\r\n buildIWContent(place);\r\n }\r\n );\r\n}\r\n\r\n\/\/ Load the place information into the HTML elements used by the info window.\r\nfunction buildIWContent(place) {\r\n document.getElementById(\"iw-icon\").innerHTML =\r\n '<img class=\"hotelIcon\" ' + 'src=\"' + place.icon + '\"\/>';\r\n document.getElementById(\"iw-url\").innerHTML =\r\n '<b><a href=\"' + place.url + '\">' + place.name + \"<\/a><\/b>\";\r\n document.getElementById(\"iw-address\").textContent = place.vicinity;\r\n if (place.formatted_phone_number) {\r\n document.getElementById(\"iw-phone-row\").style.display = \"\";\r\n document.getElementById(\"iw-phone\").textContent =\r\n place.formatted_phone_number;\r\n } else {\r\n document.getElementById(\"iw-phone-row\").style.display = \"none\";\r\n }\r\n\r\n \/\/ Assign a five-star rating to the hotel, using a black star ('✭')\r\n \/\/ to indicate the rating the hotel has earned, and a white star ('✩')\r\n \/\/ for the rating points not achieved.\r\n if (place.rating) {\r\n let ratingHtml = \"\";\r\n\r\n for (let i = 0; i < 5; i++) {\r\n if (place.rating < i + 0.5) {\r\n ratingHtml += \"✩\";\r\n } else {\r\n ratingHtml += \"✭\";\r\n }\r\n\r\n document.getElementById(\"iw-rating-row\").style.display = \"\";\r\n document.getElementById(\"iw-rating\").innerHTML = ratingHtml;\r\n }\r\n } else {\r\n document.getElementById(\"iw-rating-row\").style.display = \"none\";\r\n }\r\n\r\n \/\/ The regexp isolates the first part of the URL (domain plus subdomain)\r\n \/\/ to give a short URL for displaying in the info window.\r\n if (place.website) {\r\n let fullUrl = place.website;\r\n let website = String(hostnameRegexp.exec(place.website));\r\n\r\n if (!website) {\r\n website = \"http:\/\/\" + place.website + \"\/\";\r\n fullUrl = website;\r\n }\r\n\r\n document.getElementById(\"iw-website-row\").style.display = \"\";\r\n document.getElementById(\"iw-website\").textContent = website;\r\n } else {\r\n document.getElementById(\"iw-website-row\").style.display = \"none\";\r\n }\r\n}\r\n\r\nwindow.initMap = initMap\r\n \r\n <\/script>\r\n \r\n <\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Place Autocomplete Hotel Search Find hotels in: AllAustraliaBrazilCanadaFranceGermanyMexicoNew ZealandItalySouth AfricaSpainPortugalU.S.A.United Kingdom Address: Telephone: Rating: Website:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"customer-support.php","meta":[],"_links":{"self":[{"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/pages\/226430"}],"collection":[{"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/comments?post=226430"}],"version-history":[{"count":37,"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/pages\/226430\/revisions"}],"predecessor-version":[{"id":226489,"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/pages\/226430\/revisions\/226489"}],"wp:attachment":[{"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/media?parent=226430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n \r\n Place Autocomplete Hotel Search<\/title>\r\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\r\n <meta charset=\"utf-8\">\r\n <style>\r\n \/* Always set the map height explicitly to define the size of the div\r\n * element that contains the map. *\/\r\n #map {\r\n height: 100%;\r\n }\r\n \/* Optional: Makes the sample page fill the window. *\/\r\n html, body {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n body {\r\n padding: 0 !important;\r\n }\r\n table {\r\n font-size: 12px;\r\n }\r\n .hotel-search {\r\n -webkit-box-align: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n background: #fff;\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n display: flex;\r\n left: 0;\r\n position: absolute;\r\n top: 0;\r\n width: 440px;\r\n z-index: 1;\r\n }\r\n #map {\r\n margin-top: 40px;\r\n width: 440px;\r\n }\r\n #listing {\r\n position: absolute;\r\n width: 200px;\r\n height: 470px;\r\n overflow: auto;\r\n left: 442px;\r\n top: 0px;\r\n cursor: pointer;\r\n overflow-x: hidden;\r\n }\r\n #findhotels {\r\n font-size: 14px;\r\n }\r\n #locationField {\r\n -webkit-box-flex: 1 1 190px;\r\n -ms-flex: 1 1 190px;\r\n flex: 1 1 190px;\r\n margin: 0 8px;\r\n }\r\n #controls {\r\n -webkit-box-flex: 1 1 140px;\r\n -ms-flex: 1 1 140px;\r\n flex: 1 1 140px;\r\n }\r\n #autocomplete {\r\n width: 100%;\r\n }\r\n #country {\r\n width: 100%;\r\n }\r\n .placeIcon {\r\n width: 20px;\r\n height: 34px;\r\n margin: 4px;\r\n }\r\n .hotelIcon {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n #resultsTable {\r\n border-collapse: collapse;\r\n width: 240px;\r\n }\r\n #rating {\r\n font-size: 13px;\r\n font-family: Arial Unicode MS;\r\n }\r\n .iw_table_row {\r\n height: 18px;\r\n }\r\n .iw_attribute_name {\r\n font-weight: bold;\r\n text-align: right;\r\n }\r\n .iw_table_icon {\r\n text-align: right;\r\n }\r\n <\/style>\r\n <\/head>\r\n\r\n <body>\r\n\r\n <div class=\"hotel-search\">\r\n <div id=\"findhotels\">\r\n Find hotels in:\r\n <\/div>\r\n\r\n <div id=\"locationField\">\r\n <input id=\"autocomplete\" placeholder=\"Enter a city\" type=\"text\" \/>\r\n <\/div>\r\n\r\n <div id=\"controls\">\r\n <select id=\"country\">\r\n <option value=\"all\">All<\/option>\r\n <option value=\"au\">Australia<\/option>\r\n <option value=\"br\">Brazil<\/option>\r\n <option value=\"ca\">Canada<\/option>\r\n <option value=\"fr\">France<\/option>\r\n <option value=\"de\">Germany<\/option>\r\n <option value=\"mx\">Mexico<\/option>\r\n <option value=\"nz\">New Zealand<\/option>\r\n <option value=\"it\">Italy<\/option>\r\n <option value=\"za\">South Africa<\/option>\r\n <option value=\"es\">Spain<\/option>\r\n <option value=\"pt\">Portugal<\/option>\r\n <option value=\"us\" selected>U.S.A.<\/option>\r\n <option value=\"uk\">United Kingdom<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"map\"><\/div>\r\n\r\n <div id=\"listing\">\r\n <table id=\"resultsTable\">\r\n <tbody id=\"results\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div style=\"display: none\">\r\n <div id=\"info-content\">\r\n <table>\r\n <tr id=\"iw-url-row\" class=\"iw_table_row\">\r\n <td id=\"iw-icon\" class=\"iw_table_icon\"><\/td>\r\n <td id=\"iw-url\"><\/td>\r\n <\/tr>\r\n <tr id=\"iw-address-row\" class=\"iw_table_row\">\r\n <td class=\"iw_attribute_name\">Address:<\/td>\r\n <td id=\"iw-address\"><\/td>\r\n <\/tr>\r\n <tr id=\"iw-phone-row\" class=\"iw_table_row\">\r\n <td class=\"iw_attribute_name\">Telephone:<\/td>\r\n <td id=\"iw-phone\"><\/td>\r\n <\/tr>\r\n <tr id=\"iw-rating-row\" class=\"iw_table_row\">\r\n <td class=\"iw_attribute_name\">Rating:<\/td>\r\n <td id=\"iw-rating\"><\/td>\r\n <\/tr>\r\n <tr id=\"iw-website-row\" class=\"iw_table_row\">\r\n <td class=\"iw_attribute_name\">Website:<\/td>\r\n <td id=\"iw-website\"><\/td>\r\n <\/tr>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ This example uses the autocomplete feature of the Google Places API.\r\n \/\/ It allows the user to find all hotels in a given place, within a given\r\n \/\/ country. It then displays markers for all the hotels returned,\r\n \/\/ with on-click details for each hotel.\r\n\r\n \/\/ This example requires the Places library. Include the libraries=places\r\n \/\/ parameter when you first load the API. For example:\r\n \/\/ <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&libraries=places\">\r\n\r\n var map, places, infoWindow;\r\n var markers = [];\r\n var autocomplete;\r\n var countryRestrict = {'country': 'us'};\r\n var MARKER_PATH = 'https:\/\/developers.google.com\/maps\/documentation\/javascript\/images\/marker_green';\r\n var hostnameRegexp = new RegExp('^https?:\/\/.+?\/');\r\n\r\n var countries = {\r\n 'au': {\r\n center: {lat: -25.3, lng: 133.8},\r\n zoom: 4\r\n },\r\n 'br': {\r\n center: {lat: -14.2, lng: -51.9},\r\n zoom: 3\r\n },\r\n 'ca': {\r\n center: {lat: 62, lng: -110.0},\r\n zoom: 3\r\n },\r\n 'fr': {\r\n center: {lat: 46.2, lng: 2.2},\r\n zoom: 5\r\n },\r\n 'de': {\r\n center: {lat: 51.2, lng: 10.4},\r\n zoom: 5\r\n },\r\n 'mx': {\r\n center: {lat: 23.6, lng: -102.5},\r\n zoom: 4\r\n },\r\n 'nz': {\r\n center: {lat: -40.9, lng: 174.9},\r\n zoom: 5\r\n },\r\n 'it': {\r\n center: {lat: 41.9, lng: 12.6},\r\n zoom: 5\r\n },\r\n 'za': {\r\n center: {lat: -30.6, lng: 22.9},\r\n zoom: 5\r\n },\r\n 'es': {\r\n center: {lat: 40.5, lng: -3.7},\r\n zoom: 5\r\n },\r\n 'pt': {\r\n center: {lat: 39.4, lng: -8.2},\r\n zoom: 6\r\n },\r\n 'us': {\r\n center: {lat: 37.1, lng: -95.7},\r\n zoom: 3\r\n },\r\n 'uk': {\r\n center: {lat: 54.8, lng: -4.6},\r\n zoom: 5\r\n }\r\n };\r\n\r\n function initMap() {\r\n map = new google.maps.Map(document.getElementById('map'), {\r\n zoom: countries['us'].zoom,\r\n center: countries['us'].center,\r\n mapTypeControl: false,\r\n panControl: false,\r\n zoomControl: false,\r\n streetViewControl: false\r\n });\r\n\r\n infoWindow = new google.maps.InfoWindow({\r\n content: document.getElementById('info-content')\r\n });\r\n\r\n \/\/ Create the autocomplete object and associate it with the UI input control.\r\n \/\/ Restrict the search to the default country, and to place type \"cities\".\r\n autocomplete = new google.maps.places.Autocomplete(\r\n \/** @type {!HTMLInputElement} *\/ (\r\n document.getElementById('autocomplete')), {\r\n types: ['(cities)'],\r\n componentRestrictions: countryRestrict\r\n });\r\n places = new google.maps.places.PlacesService(map);\r\n\r\n autocomplete.addListener('place_changed', onPlaceChanged);\r\n\r\n \/\/ Add a DOM event listener to react when the user selects a country.\r\n document.getElementById('country').addEventListener(\r\n 'change', setAutocompleteCountry);\r\n }\r\n\r\n \/\/ When the user selects a city, get the place details for the city and\r\n \/\/ zoom the map in on the city.\r\n function onPlaceChanged() {\r\n var place = autocomplete.getPlace();\r\n if (place.geometry) {\r\n map.panTo(place.geometry.location);\r\n map.setZoom(15);\r\n search();\r\n } else {\r\n document.getElementById('autocomplete').placeholder = 'Enter a city';\r\n }\r\n }\r\n\r\n \/\/ Search for hotels in the selected city, within the viewport of the map.\r\n function search() {\r\n var search = {\r\n bounds: map.getBounds(),\r\n types: ['lodging']\r\n };\r\n\r\n places.nearbySearch(search, function(results, status) {\r\n if (status === google.maps.places.PlacesServiceStatus.OK) {\r\n clearResults();\r\n clearMarkers();\r\n \/\/ Create a marker for each hotel found, and\r\n \/\/ assign a letter of the alphabetic to each marker icon.\r\n for (var i = 0; i < results.length; i++) {\r\n var markerLetter = String.fromCharCode('A'.charCodeAt(0) + (i % 26));\r\n var markerIcon = MARKER_PATH + markerLetter + '.png';\r\n \/\/ Use marker animation to drop the icons incrementally on the map.\r\n markers[i] = new google.maps.Marker({\r\n position: results[i].geometry.location,\r\n animation: google.maps.Animation.DROP,\r\n icon: markerIcon\r\n });\r\n \/\/ If the user clicks a hotel marker, show the details of that hotel\r\n \/\/ in an info window.\r\n markers[i].placeResult = results[i];\r\n google.maps.event.addListener(markers[i], 'click', showInfoWindow);\r\n setTimeout(dropMarker(i), i * 100);\r\n addResult(results[i], i);\r\n }\r\n }\r\n });\r\n }\r\n\r\n function clearMarkers() {\r\n for (var i = 0; i < markers.length; i++) {\r\n if (markers[i]) {\r\n markers[i].setMap(null);\r\n }\r\n }\r\n markers = [];\r\n }\r\n\r\n \/\/ Set the country restriction based on user input.\r\n \/\/ Also center and zoom the map on the given country.\r\n function setAutocompleteCountry() {\r\n var country = document.getElementById('country').value;\r\n if (country == 'all') {\r\n autocomplete.setComponentRestrictions({'country': []});\r\n map.setCenter({lat: 15, lng: 0});\r\n map.setZoom(2);\r\n } else {\r\n autocomplete.setComponentRestrictions({'country': country});\r\n map.setCenter(countries[country].center);\r\n map.setZoom(countries[country].zoom);\r\n }\r\n clearResults();\r\n clearMarkers();\r\n }\r\n\r\n function dropMarker(i) {\r\n return function() {\r\n markers[i].setMap(map);\r\n };\r\n }\r\n\r\n function addResult(result, i) {\r\n var results = document.getElementById('results');\r\n var markerLetter = String.fromCharCode('A'.charCodeAt(0) + (i % 26));\r\n var markerIcon = MARKER_PATH + markerLetter + '.png';\r\n\r\n var tr = document.createElement('tr');\r\n tr.style.backgroundColor = (i % 2 === 0 ? '#F0F0F0' : '#FFFFFF');\r\n tr.onclick = function() {\r\n google.maps.event.trigger(markers[i], 'click');\r\n };\r\n\r\n var iconTd = document.createElement('td');\r\n var nameTd = document.createElement('td');\r\n var icon = document.createElement('img');\r\n icon.src = markerIcon;\r\n icon.setAttribute('class', 'placeIcon');\r\n icon.setAttribute('className', 'placeIcon');\r\n var name = document.createTextNode(result.name);\r\n iconTd.appendChild(icon);\r\n nameTd.appendChild(name);\r\n tr.appendChild(iconTd);\r\n tr.appendChild(nameTd);\r\n results.appendChild(tr);\r\n }\r\n\r\n function clearResults() {\r\n var results = document.getElementById('results');\r\n while (results.childNodes[0]) {\r\n results.removeChild(results.childNodes[0]);\r\n }\r\n }\r\n\r\n \/\/ Get the place details for a hotel. Show the information in an info window,\r\n \/\/ anchored on the marker for the hotel that the user selected.\r\n function showInfoWindow() {\r\n var marker = this;\r\n places.getDetails({placeId: marker.placeResult.place_id},\r\n function(place, status) {\r\n if (status !== google.maps.places.PlacesServiceStatus.OK) {\r\n return;\r\n }\r\n infoWindow.open(map, marker);\r\n buildIWContent(place);\r\n });\r\n }\r\n\r\n \/\/ Load the place information into the HTML elements used by the info window.\r\n function buildIWContent(place) {\r\n document.getElementById('iw-icon').innerHTML = '<img class=\"hotelIcon\" ' +\r\n 'src=\"' + place.icon + '\"\/>';\r\n document.getElementById('iw-url').innerHTML = '<b><a href=\"' + place.url +\r\n '\">' + place.name + '<\/a><\/b>';\r\n document.getElementById('iw-address').textContent = place.vicinity;\r\n\r\n if (place.formatted_phone_number) {\r\n document.getElementById('iw-phone-row').style.display = '';\r\n document.getElementById('iw-phone').textContent =\r\n place.formatted_phone_number;\r\n } else {\r\n document.getElementById('iw-phone-row').style.display = 'none';\r\n }\r\n\r\n \/\/ Assign a five-star rating to the hotel, using a black star ('✭')\r\n \/\/ to indicate the rating the hotel has earned, and a white star ('✩')\r\n \/\/ for the rating points not achieved.\r\n if (place.rating) {\r\n var ratingHtml = '';\r\n for (var i = 0; i < 5; i++) {\r\n if (place.rating < (i + 0.5)) {\r\n ratingHtml += '✩';\r\n } else {\r\n ratingHtml += '✭';\r\n }\r\n document.getElementById('iw-rating-row').style.display = '';\r\n document.getElementById('iw-rating').innerHTML = ratingHtml;\r\n }\r\n } else {\r\n document.getElementById('iw-rating-row').style.display = 'none';\r\n }\r\n\r\n \/\/ The regexp isolates the first part of the URL (domain plus subdomain)\r\n \/\/ to give a short URL for displaying in the info window.\r\n if (place.website) {\r\n var fullUrl = place.website;\r\n var website = hostnameRegexp.exec(place.website);\r\n if (website === null) {\r\n website = 'http:\/\/' + place.website + '\/';\r\n fullUrl = website;\r\n }\r\n document.getElementById('iw-website-row').style.display = '';\r\n document.getElementById('iw-website').textContent = website;\r\n } else {\r\n document.getElementById('iw-website-row').style.display = 'none';\r\n }\r\n }\r\n <\/script>\r\n <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?v=3.exp&sensor=false&key=AIzaSyCFpP_miS6kjjBCJdHj-OjCKcu-CVhgypo\"><\/script> \r\n <script>\r\n \/\/ This example uses the autocomplete feature of the Google Places API.\r\n\/\/ It allows the user to find all hotels in a given place, within a given\r\n\/\/ country. It then displays markers for all the hotels returned,\r\n\/\/ with on-click details for each hotel.\r\n\/\/ This example requires the Places library. Include the libraries=places\r\n\/\/ parameter when you first load the API. For example:\r\n\/\/ <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&libraries=places\">\r\nlet map;\r\nlet places;\r\nlet infoWindow;\r\nlet markers = [];\r\nlet autocomplete;\r\nconst countryRestrict = { country: \"us\" };\r\nconst MARKER_PATH =\r\n \"https:\/\/developers.google.com\/maps\/documentation\/javascript\/images\/marker_green\";\r\nconst hostnameRegexp = new RegExp(\"^https?:\/\/.+?\/\");\r\nconst countries = {\r\n au: {\r\n center: { lat: -25.3, lng: 133.8 },\r\n zoom: 4,\r\n },\r\n br: {\r\n center: { lat: -14.2, lng: -51.9 },\r\n zoom: 3,\r\n },\r\n ca: {\r\n center: { lat: 62, lng: -110.0 },\r\n zoom: 3,\r\n },\r\n fr: {\r\n center: { lat: 46.2, lng: 2.2 },\r\n zoom: 5,\r\n },\r\n de: {\r\n center: { lat: 51.2, lng: 10.4 },\r\n zoom: 5,\r\n },\r\n mx: {\r\n center: { lat: 23.6, lng: -102.5 },\r\n zoom: 4,\r\n },\r\n nz: {\r\n center: { lat: -40.9, lng: 174.9 },\r\n zoom: 5,\r\n },\r\n it: {\r\n center: { lat: 41.9, lng: 12.6 },\r\n zoom: 5,\r\n },\r\n za: {\r\n center: { lat: -30.6, lng: 22.9 },\r\n zoom: 5,\r\n },\r\n es: {\r\n center: { lat: 40.5, lng: -3.7 },\r\n zoom: 5,\r\n },\r\n pt: {\r\n center: { lat: 39.4, lng: -8.2 },\r\n zoom: 6,\r\n },\r\n us: {\r\n center: { lat: 37.1, lng: -95.7 },\r\n zoom: 3,\r\n },\r\n uk: {\r\n center: { lat: 54.8, lng: -4.6 },\r\n zoom: 5,\r\n },\r\n};\r\n\r\nfunction initMap() {\r\n map = new google.maps.Map(document.getElementById(\"map\"), {\r\n zoom: countries[\"us\"].zoom,\r\n center: countries[\"us\"].center,\r\n mapTypeControl: false,\r\n panControl: false,\r\n zoomControl: false,\r\n streetViewControl: false,\r\n });\r\n infoWindow = new google.maps.InfoWindow({\r\n content: document.getElementById(\"info-content\"),\r\n });\r\n \/\/ Create the autocomplete object and associate it with the UI input control.\r\n \/\/ Restrict the search to the default country, and to place type \"cities\".\r\n autocomplete = new google.maps.places.Autocomplete(\r\n document.getElementById(\"autocomplete\"),\r\n {\r\n types: [\"(cities)\"],\r\n componentRestrictions: countryRestrict,\r\n fields: [\"geometry\"],\r\n }\r\n );\r\n places = new google.maps.places.PlacesService(map);\r\n autocomplete.addListener(\"place_changed\", onPlaceChanged);\r\n \/\/ Add a DOM event listener to react when the user selects a country.\r\n document\r\n .getElementById(\"country\")\r\n .addEventListener(\"change\", setAutocompleteCountry);\r\n}\r\n\r\n\/\/ When the user selects a city, get the place details for the city and\r\n\/\/ zoom the map in on the city.\r\nfunction onPlaceChanged() {\r\n const place = autocomplete.getPlace();\r\n\r\n if (place.geometry && place.geometry.location) {\r\n map.panTo(place.geometry.location);\r\n map.setZoom(15);\r\n search();\r\n } else {\r\n document.getElementById(\"autocomplete\").placeholder = \"Enter a city\";\r\n }\r\n}\r\n\r\n\/\/ Search for hotels in the selected city, within the viewport of the map.\r\nfunction search() {\r\n const search = {\r\n bounds: map.getBounds(),\r\n types: [\"lodging\"],\r\n };\r\n\r\n places.nearbySearch(search, (results, status, pagination) => {\r\n if (status === google.maps.places.PlacesServiceStatus.OK && results) {\r\n clearResults();\r\n clearMarkers();\r\n\r\n \/\/ Create a marker for each hotel found, and\r\n \/\/ assign a letter of the alphabetic to each marker icon.\r\n for (let i = 0; i < results.length; i++) {\r\n const markerLetter = String.fromCharCode(\"A\".charCodeAt(0) + (i % 26));\r\n const markerIcon = MARKER_PATH + markerLetter + \".png\";\r\n\r\n \/\/ Use marker animation to drop the icons incrementally on the map.\r\n markers[i] = new google.maps.Marker({\r\n position: results[i].geometry.location,\r\n animation: google.maps.Animation.DROP,\r\n icon: markerIcon,\r\n });\r\n \/\/ If the user clicks a hotel marker, show the details of that hotel\r\n \/\/ in an info window.\r\n \/\/ @ts-ignore TODO refactor to avoid storing on marker\r\n markers[i].placeResult = results[i];\r\n google.maps.event.addListener(markers[i], \"click\", showInfoWindow);\r\n setTimeout(dropMarker(i), i * 100);\r\n addResult(results[i], i);\r\n }\r\n }\r\n });\r\n}\r\n\r\nfunction clearMarkers() {\r\n for (let i = 0; i < markers.length; i++) {\r\n if (markers[i]) {\r\n markers[i].setMap(null);\r\n }\r\n }\r\n\r\n markers = [];\r\n}\r\n\r\n\/\/ Set the country restriction based on user input.\r\n\/\/ Also center and zoom the map on the given country.\r\nfunction setAutocompleteCountry() {\r\n const country = document.getElementById(\"country\").value;\r\n\r\n if (country == \"all\") {\r\n autocomplete.setComponentRestrictions({ country: [] });\r\n map.setCenter({ lat: 15, lng: 0 });\r\n map.setZoom(2);\r\n } else {\r\n autocomplete.setComponentRestrictions({ country: country });\r\n map.setCenter(countries[country].center);\r\n map.setZoom(countries[country].zoom);\r\n }\r\n\r\n clearResults();\r\n clearMarkers();\r\n}\r\n\r\nfunction dropMarker(i) {\r\n return function () {\r\n markers[i].setMap(map);\r\n };\r\n}\r\n\r\nfunction addResult(result, i) {\r\n const results = document.getElementById(\"results\");\r\n const markerLetter = String.fromCharCode(\"A\".charCodeAt(0) + (i % 26));\r\n const markerIcon = MARKER_PATH + markerLetter + \".png\";\r\n const tr = document.createElement(\"tr\");\r\n\r\n tr.style.backgroundColor = i % 2 === 0 ? \"#F0F0F0\" : \"#FFFFFF\";\r\n tr.onclick = function () {\r\n google.maps.event.trigger(markers[i], \"click\");\r\n };\r\n\r\n const iconTd = document.createElement(\"td\");\r\n const nameTd = document.createElement(\"td\");\r\n const icon = document.createElement(\"img\");\r\n\r\n icon.src = markerIcon;\r\n icon.setAttribute(\"class\", \"placeIcon\");\r\n icon.setAttribute(\"className\", \"placeIcon\");\r\n\r\n const name = document.createTextNode(result.name);\r\n\r\n iconTd.appendChild(icon);\r\n nameTd.appendChild(name);\r\n tr.appendChild(iconTd);\r\n tr.appendChild(nameTd);\r\n results.appendChild(tr);\r\n}\r\n\r\nfunction clearResults() {\r\n const results = document.getElementById(\"results\");\r\n\r\n while (results.childNodes[0]) {\r\n results.removeChild(results.childNodes[0]);\r\n }\r\n}\r\n\r\n\/\/ Get the place details for a hotel. Show the information in an info window,\r\n\/\/ anchored on the marker for the hotel that the user selected.\r\nfunction showInfoWindow() {\r\n \/\/ @ts-ignore\r\n const marker = this;\r\n\r\n places.getDetails(\r\n { placeId: marker.placeResult.place_id },\r\n (place, status) => {\r\n if (status !== google.maps.places.PlacesServiceStatus.OK) {\r\n return;\r\n }\r\n\r\n infoWindow.open(map, marker);\r\n buildIWContent(place);\r\n }\r\n );\r\n}\r\n\r\n\/\/ Load the place information into the HTML elements used by the info window.\r\nfunction buildIWContent(place) {\r\n document.getElementById(\"iw-icon\").innerHTML =\r\n '<img class=\"hotelIcon\" ' + 'src=\"' + place.icon + '\"\/>';\r\n document.getElementById(\"iw-url\").innerHTML =\r\n '<b><a href=\"' + place.url + '\">' + place.name + \"<\/a><\/b>\";\r\n document.getElementById(\"iw-address\").textContent = place.vicinity;\r\n if (place.formatted_phone_number) {\r\n document.getElementById(\"iw-phone-row\").style.display = \"\";\r\n document.getElementById(\"iw-phone\").textContent =\r\n place.formatted_phone_number;\r\n } else {\r\n document.getElementById(\"iw-phone-row\").style.display = \"none\";\r\n }\r\n\r\n \/\/ Assign a five-star rating to the hotel, using a black star ('✭')\r\n \/\/ to indicate the rating the hotel has earned, and a white star ('✩')\r\n \/\/ for the rating points not achieved.\r\n if (place.rating) {\r\n let ratingHtml = \"\";\r\n\r\n for (let i = 0; i < 5; i++) {\r\n if (place.rating < i + 0.5) {\r\n ratingHtml += \"✩\";\r\n } else {\r\n ratingHtml += \"✭\";\r\n }\r\n\r\n document.getElementById(\"iw-rating-row\").style.display = \"\";\r\n document.getElementById(\"iw-rating\").innerHTML = ratingHtml;\r\n }\r\n } else {\r\n document.getElementById(\"iw-rating-row\").style.display = \"none\";\r\n }\r\n\r\n \/\/ The regexp isolates the first part of the URL (domain plus subdomain)\r\n \/\/ to give a short URL for displaying in the info window.\r\n if (place.website) {\r\n let fullUrl = place.website;\r\n let website = String(hostnameRegexp.exec(place.website));\r\n\r\n if (!website) {\r\n website = \"http:\/\/\" + place.website + \"\/\";\r\n fullUrl = website;\r\n }\r\n\r\n document.getElementById(\"iw-website-row\").style.display = \"\";\r\n document.getElementById(\"iw-website\").textContent = website;\r\n } else {\r\n document.getElementById(\"iw-website-row\").style.display = \"none\";\r\n }\r\n}\r\n\r\nwindow.initMap = initMap\r\n \r\n <\/script>\r\n \r\n <\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Place Autocomplete Hotel Search Find hotels in: AllAustraliaBrazilCanadaFranceGermanyMexicoNew ZealandItalySouth AfricaSpainPortugalU.S.A.United Kingdom Address: Telephone: Rating: Website:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"customer-support.php","meta":[],"_links":{"self":[{"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/pages\/226430"}],"collection":[{"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/comments?post=226430"}],"version-history":[{"count":37,"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/pages\/226430\/revisions"}],"predecessor-version":[{"id":226489,"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/pages\/226430\/revisions\/226489"}],"wp:attachment":[{"href":"https:\/\/b2cbeta.akbartravels.com\/in\/wp-json\/wp\/v2\/media?parent=226430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}