Skip to content

Instantly share code, notes, and snippets.

@JacobHsu

JacobHsu/PlaceAutocomplete.html

Last active November 25, 2015 09:02
Show Gist options
  • Save JacobHsu/583fdb7c02c85b6dd4b5 to your computer and use it in GitHub Desktop.
Save JacobHsu/583fdb7c02c85b6dd4b5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
PlaceAutocomplete.html
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Hotel Search</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<style>
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;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="controls">
<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>
<script id="jsbin-javascript">
// This example uses the autocomplete feature of the Google Places API.
// It allows the user to find all hotels in a given place, within a given
// country. It then displays markers for all the hotels returned,
// with on-click details for each hotel.
var map, places, infoWindow;
var markers = [];
var autocomplete;
//var countryRestrict = { 'country': 'us' };
//var MARKER_PATH = 'https://maps.gstatic.com/intl/en_us/mapfiles/marker_green';
//var hostnameRegexp = new RegExp('^https?://.+?/');
var countries = {
'au': {
center: new google.maps.LatLng(-25.3, 133.8),
zoom: 4
},
'br': {
center: new google.maps.LatLng(-14.2, -51.9),
zoom: 3
},
'ca': {
center: new google.maps.LatLng(62, -110.0),
zoom: 3
},
'fr': {
center: new google.maps.LatLng(46.2, 2.2),
zoom: 5
},
'de': {
center: new google.maps.LatLng(51.2, 10.4),
zoom: 5
},
'mx': {
center: new google.maps.LatLng(23.6, -102.5),
zoom: 4
},
'nz': {
center: new google.maps.LatLng(-40.9, 174.9),
zoom: 5
},
'it': {
center: new google.maps.LatLng(41.9, 12.6),
zoom: 5
},
'za': {
center: new google.maps.LatLng(-30.6, 22.9),
zoom: 5
},
'es': {
center: new google.maps.LatLng(40.5, -3.7),
zoom: 5
},
'pt': {
center: new google.maps.LatLng(39.4, -8.2),
zoom: 6
},
'us': {
center: new google.maps.LatLng(37.1, -95.7),
zoom: 3
},
'uk': {
center: new google.maps.LatLng(54.8, -4.6),
zoom: 5
}
};
function initialize() {
var myOptions = {
zoom: countries['us'].zoom,
center: countries['us'].center,
mapTypeControl: false,
panControl: false,
zoomControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
google.maps.event.addDomListener(document.getElementById('country'), 'change',
setAutocompleteCountry);
}//
// [START region_setcountry]
// Set the country restriction based on user input.
// Also center and zoom the map on the given country.
function setAutocompleteCountry() {
var country = document.getElementById('country').value;
//if (country == 'all') {
// autocomplete.setComponentRestrictions([]);
// map.setCenter(new google.maps.LatLng(15, 0));
// map.setZoom(2);
// } else {
//autocomplete.setComponentRestrictions({ 'country': country });
map.setCenter(countries[country].center);
map.setZoom(countries[country].zoom);
//}
//clearResults();
//clearMarkers();
}
// [END region_setcountry]
</script>
</body>
</html>
Raw
PlaceAutocomplete.js
// This example uses the autocomplete feature of the Google Places API.
// It allows the user to find all hotels in a given place, within a given
// country. It then displays markers for all the hotels returned,
// with on-click details for each hotel.
var map, places, infoWindow;
var markers = [];
var autocomplete;
//var countryRestrict = { 'country': 'us' };
//var MARKER_PATH = 'https://maps.gstatic.com/intl/en_us/mapfiles/marker_green';
//var hostnameRegexp = new RegExp('^https?://.+?/');
var countries = {
'au': {
center: new google.maps.LatLng(-25.3, 133.8),
zoom: 4
},
'br': {
center: new google.maps.LatLng(-14.2, -51.9),
zoom: 3
},
'ca': {
center: new google.maps.LatLng(62, -110.0),
zoom: 3
},
'fr': {
center: new google.maps.LatLng(46.2, 2.2),
zoom: 5
},
'de': {
center: new google.maps.LatLng(51.2, 10.4),
zoom: 5
},
'mx': {
center: new google.maps.LatLng(23.6, -102.5),
zoom: 4
},
'nz': {
center: new google.maps.LatLng(-40.9, 174.9),
zoom: 5
},
'it': {
center: new google.maps.LatLng(41.9, 12.6),
zoom: 5
},
'za': {
center: new google.maps.LatLng(-30.6, 22.9),
zoom: 5
},
'es': {
center: new google.maps.LatLng(40.5, -3.7),
zoom: 5
},
'pt': {
center: new google.maps.LatLng(39.4, -8.2),
zoom: 6
},
'us': {
center: new google.maps.LatLng(37.1, -95.7),
zoom: 3
},
'uk': {
center: new google.maps.LatLng(54.8, -4.6),
zoom: 5
}
};
function initialize() {
var myOptions = {
zoom: countries['us'].zoom,
center: countries['us'].center,
mapTypeControl: false,
panControl: false,
zoomControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
google.maps.event.addDomListener(document.getElementById('country'), 'change',
setAutocompleteCountry);
}//
// [START region_setcountry]
// Set the country restriction based on user input.
// Also center and zoom the map on the given country.
function setAutocompleteCountry() {
var country = document.getElementById('country').value;
//if (country == 'all') {
// autocomplete.setComponentRestrictions([]);
// map.setCenter(new google.maps.LatLng(15, 0));
// map.setZoom(2);
// } else {
//autocomplete.setComponentRestrictions({ 'country': country });
map.setCenter(countries[country].center);
map.setZoom(countries[country].zoom);
//}
//clearResults();
//clearMarkers();
}
// [END region_setcountry]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment