Skip to content

Instantly share code, notes, and snippets.

@dcurletti
Created January 6, 2019 19:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dcurletti/ade6f76ecd8fdbd2461b6b6d4e0e3c70 to your computer and use it in GitHub Desktop.
Save dcurletti/ade6f76ecd8fdbd2461b6b6d4e0e3c70 to your computer and use it in GitHub Desktop.
<input type="text" id="fld_1003421_1">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAy7pJbsg4gozI1KGhvHT7x1rVmVHVAc5E&libraries=places,geometry&callback=initAutocomplete"
async defer></script>
<script type="text/javascript" src="fireStationForm.js"></script>
var autocomplete, placesService, distanceService;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
neighborhood: 'long_name',
locality: 'long_name',
administrative_area_level_2: 'long_name',
administrative_area_level_1: 'short_name',
postal_code: 'short_name',
country: 'short_name'
};
var addressComponentToInputDivMap = new Map([
["street_number", "fld_5831544_1"],
["route", "fld_9674711_1"],
["neighborhood", "fld_2313002_1"],
["locality", "fld_7515089_1"],
["administrative_area_level_2", "fld_8319736_1"],
["administrative_area_level_1", "fld_1058140_1"],
["postal_code", "fld_5967767_1"],
["country", "fld_4339241_1"],
]);
var autocompleteInputId = "fld_1003421_1";
var fireStationNameInputId = 'fld_5784456_1';
var fireStationDistanceInputId = 'fld_5113169_1';
function initAutocomplete() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.888111, -79.743723),
new google.maps.LatLng(45.041968, -73.261430));
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById(autocompleteInputId)),
{
componentRestrictions: {country: 'us'},
bounds: defaultBounds,
types: ['address']
});
autocomplete.addListener('place_changed', handlePlaceSelection);
initPlacesService();
initAutocompleteListeners();
distanceService = new google.maps.DistanceMatrixService();
}
function initPlacesService() {
var fakeMapDiv = findOrCreateDiv('fakeMap');
placesService = new google.maps.places.PlacesService(fakeMapDiv);
}
function initAutocompleteListeners() {
google.maps.event.addDomListener(document.getElementById(autocompleteInputId), 'keydown', function (e) {
// If it's Enter
if (e.keyCode === 13) {
// Select all Google's dropdown DOM nodes (can be multiple)
var googleDOMNodes = document.getElementsByClassName('pac-container');
var googleDOMNodeIsVisible = false;
// Check if any of them are visible
for (var i = 0; i < googleDOMNodes.length; i++) {
if (googleDOMNodes[i].offsetParent !== null) {
googleDOMNodeIsVisible = true;
break
}
}
//If multiple nodes, prevent form submit.
if (googleDOMNodeIsVisible) {
e.preventDefault();
}
}
});
}
function handlePlaceSelection() {
var place = autocomplete.getPlace();
// This is for the scenario where a user removes a place from the
// address input (aka no place is available)
if (place && place.address_components) {
clearAllInputs();
fillInAddress();
findNearestFireStation();
}
}
function clearAllInputs() {
addressComponentToInputDivMap.forEach(function (v) {
document.getElementById(v).value = '';
});
document.getElementById(fireStationNameInputId).value = '';
document.getElementById(fireStationDistanceInputId).value = '';
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(
addressComponentToInputDivMap.get(addressType)
).value = val;
}
}
}
function findNearestFireStation() {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
var coords = new google.maps.LatLng(lat, lng);
placesService.nearbySearch({
location: coords,
type: 'fire_station',
rankBy: google.maps.places.RankBy.DISTANCE
}, handleFindNearestDrivingDistanceFireStation.bind(this, coords));
}
function handleFindNearestDrivingDistanceFireStation(coords, fireStations) {
distanceService.getDistanceMatrix({
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
origins: fireStations.map(function (fireStation) {
return new google.maps.LatLng(fireStation.geometry.location.lat(), fireStation.geometry.location.lng())
}),
destinations: [coords]
}, function (results) {
var drivingDistances;
try {
drivingDistances = results.rows;
} catch (e) {
console.error(e);
return
}
drivingDistances = drivingDistances.map(function (row, i) {
const drivingDistance = row.elements[0];
return {
distance: drivingDistance.distance,
destinationId: i
}
});
drivingDistances = drivingDistances.sort(function (a, b) {
return a.distance.value - b.distance.value
});
var closestDrivingDistance = drivingDistances[0];
var closestFireStation = fireStations[closestDrivingDistance.destinationId];
fillInFireStation(closestFireStation.name, closestDrivingDistance.distance.text)
})
}
function fillInFireStation(fireStationName, fireStationDistance) {
var fireStationNameInput = document.getElementById(fireStationNameInputId);
var fireStationDistanceInput = document.getElementById(fireStationDistanceInputId);
fireStationNameInput.value = fireStationName;
fireStationDistanceInput.value = fireStationDistance;
}
function findOrCreateDiv(id) {
var div = document.getElementById(id);
if (!div) {
div = document.createElement("div");
div.id = id;
document.body.append(div)
}
return div
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment