This code provides an address autocomplete feature using the Google Places API. When a user types in the “from” field, it shows address suggestions. Upon selecting an address, it needs to retrieves and displays the latitude and longitude of the selected address, which can be used to fetch related addresses for the “to” field. The script initializes the autocomplete functionality, handles input events, fetches and displays suggestions, and processes the selected place details.
<code> <!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" />
</head>
<body>
<div class="searchDiv">
<form id="addressForm" action="getAddress.php" method="post">
<div class="fromDiv">
<input id="from" name="fromAddress" type="text" placeholder="Search from address" />
<input type="text" name="s_latitude" id="s_latitude" value="" />
<input type="text" name="s_longitude" id="s_longitude" value="" />
<div id="fromTitle"></div>
<ul id="selectedFrom"></ul>
</div>
<div class="toDiv">
<input id="to" name="toAddress" type="text" placeholder="Search to address" />
<div id="toTitle"></div>
<ul id="selectedTo"></ul>
</div>
<button class="submit" type="submit">Submit</button>
</form>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=init&libraries=places&v=weekly" defer></script>
<script>
let fromInput;
let toInput;
let token;
let fromRequest = {
input: "",
language: "en-US",
region: "uk",
sessionToken: null
};
let toRequest = {
input: "",
language: "en-US",
region: "uk",
sessionToken: null
};
async function init() {
token = new google.maps.places.AutocompleteSessionToken();
fromInput = document.getElementById("from");
toInput = document.getElementById("to");
fromInput.addEventListener("input", () => makeAcRequest(fromInput, fromRequest, document.getElementById("fromTitle"), document.getElementById("selectedFrom")));
toInput.addEventListener("input", () => makeAcRequest(toInput, toRequest, document.getElementById("toTitle"), document.getElementById("selectedTo")));
fromRequest = refreshToken(fromRequest);
toRequest = refreshToken(toRequest);
}
async function makeAcRequest(input, request, titleElement, resultsElement) {
// Reset elements and exit if an empty string is received.
if (input.value == "") {
titleElement.innerText = "";
resultsElement.replaceChildren();
return;
}
// Add the latest char sequence to the request.
request.input = input.value;
// Fetch autocomplete suggestions and show them in a list.
try {
const {
suggestions
} = await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
titleElement.innerText = `Query predictions for "${request.input}"`;
// Clear the list first.
resultsElement.replaceChildren();
for (const suggestion of suggestions) {
const placePrediction = suggestion.placePrediction;
// Create a link for the place, add an event handler to fetch the place.
const a = document.createElement("a");
a.addEventListener("click", () => {
onPlaceSelected(placePrediction.toPlace(), input, resultsElement, titleElement);
});
a.innerText = placePrediction.text.toString();
// Create a new list element.
const li = document.createElement("li");
li.appendChild(a);
resultsElement.appendChild(li);
}
} catch (error) {
console.error('Error fetching autocomplete suggestions:', error);
}
}
// Event handler for clicking on a suggested place.
async function onPlaceSelected(place, input, resultsElement, titleElement) {
try {
await place.fetchFields({
fields: ["formattedAddress"],
});
// Set the input value to the selected address
input.value = place.formattedAddress || '';
// Clear other elements
resultsElement.replaceChildren();
titleElement.innerText = "Selected Place:";
// Optionally, you can reset the autocomplete request here
fromRequest = refreshToken(fromRequest);
toRequest = refreshToken(toRequest);
} catch (error) {
console.error('Error fetching place details:', error);
}
}
// Helper function to refresh the session token.
async function refreshToken(request) {
// Create a new session token and add it to the request.
request.sessionToken = new google.maps.places.AutocompleteSessionToken();
return request;
}
window.init = init;
</script>
</body>
</html>```
</code>
<code> <!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" />
</head>
<body>
<div class="searchDiv">
<form id="addressForm" action="getAddress.php" method="post">
<div class="fromDiv">
<input id="from" name="fromAddress" type="text" placeholder="Search from address" />
<input type="text" name="s_latitude" id="s_latitude" value="" />
<input type="text" name="s_longitude" id="s_longitude" value="" />
<div id="fromTitle"></div>
<ul id="selectedFrom"></ul>
</div>
<div class="toDiv">
<input id="to" name="toAddress" type="text" placeholder="Search to address" />
<div id="toTitle"></div>
<ul id="selectedTo"></ul>
</div>
<button class="submit" type="submit">Submit</button>
</form>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=init&libraries=places&v=weekly" defer></script>
<script>
let fromInput;
let toInput;
let token;
let fromRequest = {
input: "",
language: "en-US",
region: "uk",
sessionToken: null
};
let toRequest = {
input: "",
language: "en-US",
region: "uk",
sessionToken: null
};
async function init() {
token = new google.maps.places.AutocompleteSessionToken();
fromInput = document.getElementById("from");
toInput = document.getElementById("to");
fromInput.addEventListener("input", () => makeAcRequest(fromInput, fromRequest, document.getElementById("fromTitle"), document.getElementById("selectedFrom")));
toInput.addEventListener("input", () => makeAcRequest(toInput, toRequest, document.getElementById("toTitle"), document.getElementById("selectedTo")));
fromRequest = refreshToken(fromRequest);
toRequest = refreshToken(toRequest);
}
async function makeAcRequest(input, request, titleElement, resultsElement) {
// Reset elements and exit if an empty string is received.
if (input.value == "") {
titleElement.innerText = "";
resultsElement.replaceChildren();
return;
}
// Add the latest char sequence to the request.
request.input = input.value;
// Fetch autocomplete suggestions and show them in a list.
try {
const {
suggestions
} = await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
titleElement.innerText = `Query predictions for "${request.input}"`;
// Clear the list first.
resultsElement.replaceChildren();
for (const suggestion of suggestions) {
const placePrediction = suggestion.placePrediction;
// Create a link for the place, add an event handler to fetch the place.
const a = document.createElement("a");
a.addEventListener("click", () => {
onPlaceSelected(placePrediction.toPlace(), input, resultsElement, titleElement);
});
a.innerText = placePrediction.text.toString();
// Create a new list element.
const li = document.createElement("li");
li.appendChild(a);
resultsElement.appendChild(li);
}
} catch (error) {
console.error('Error fetching autocomplete suggestions:', error);
}
}
// Event handler for clicking on a suggested place.
async function onPlaceSelected(place, input, resultsElement, titleElement) {
try {
await place.fetchFields({
fields: ["formattedAddress"],
});
// Set the input value to the selected address
input.value = place.formattedAddress || '';
// Clear other elements
resultsElement.replaceChildren();
titleElement.innerText = "Selected Place:";
// Optionally, you can reset the autocomplete request here
fromRequest = refreshToken(fromRequest);
toRequest = refreshToken(toRequest);
} catch (error) {
console.error('Error fetching place details:', error);
}
}
// Helper function to refresh the session token.
async function refreshToken(request) {
// Create a new session token and add it to the request.
request.sessionToken = new google.maps.places.AutocompleteSessionToken();
return request;
}
window.init = init;
</script>
</body>
</html>```
</code>
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" />
</head>
<body>
<div class="searchDiv">
<form id="addressForm" action="getAddress.php" method="post">
<div class="fromDiv">
<input id="from" name="fromAddress" type="text" placeholder="Search from address" />
<input type="text" name="s_latitude" id="s_latitude" value="" />
<input type="text" name="s_longitude" id="s_longitude" value="" />
<div id="fromTitle"></div>
<ul id="selectedFrom"></ul>
</div>
<div class="toDiv">
<input id="to" name="toAddress" type="text" placeholder="Search to address" />
<div id="toTitle"></div>
<ul id="selectedTo"></ul>
</div>
<button class="submit" type="submit">Submit</button>
</form>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=init&libraries=places&v=weekly" defer></script>
<script>
let fromInput;
let toInput;
let token;
let fromRequest = {
input: "",
language: "en-US",
region: "uk",
sessionToken: null
};
let toRequest = {
input: "",
language: "en-US",
region: "uk",
sessionToken: null
};
async function init() {
token = new google.maps.places.AutocompleteSessionToken();
fromInput = document.getElementById("from");
toInput = document.getElementById("to");
fromInput.addEventListener("input", () => makeAcRequest(fromInput, fromRequest, document.getElementById("fromTitle"), document.getElementById("selectedFrom")));
toInput.addEventListener("input", () => makeAcRequest(toInput, toRequest, document.getElementById("toTitle"), document.getElementById("selectedTo")));
fromRequest = refreshToken(fromRequest);
toRequest = refreshToken(toRequest);
}
async function makeAcRequest(input, request, titleElement, resultsElement) {
// Reset elements and exit if an empty string is received.
if (input.value == "") {
titleElement.innerText = "";
resultsElement.replaceChildren();
return;
}
// Add the latest char sequence to the request.
request.input = input.value;
// Fetch autocomplete suggestions and show them in a list.
try {
const {
suggestions
} = await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
titleElement.innerText = `Query predictions for "${request.input}"`;
// Clear the list first.
resultsElement.replaceChildren();
for (const suggestion of suggestions) {
const placePrediction = suggestion.placePrediction;
// Create a link for the place, add an event handler to fetch the place.
const a = document.createElement("a");
a.addEventListener("click", () => {
onPlaceSelected(placePrediction.toPlace(), input, resultsElement, titleElement);
});
a.innerText = placePrediction.text.toString();
// Create a new list element.
const li = document.createElement("li");
li.appendChild(a);
resultsElement.appendChild(li);
}
} catch (error) {
console.error('Error fetching autocomplete suggestions:', error);
}
}
// Event handler for clicking on a suggested place.
async function onPlaceSelected(place, input, resultsElement, titleElement) {
try {
await place.fetchFields({
fields: ["formattedAddress"],
});
// Set the input value to the selected address
input.value = place.formattedAddress || '';
// Clear other elements
resultsElement.replaceChildren();
titleElement.innerText = "Selected Place:";
// Optionally, you can reset the autocomplete request here
fromRequest = refreshToken(fromRequest);
toRequest = refreshToken(toRequest);
} catch (error) {
console.error('Error fetching place details:', error);
}
}
// Helper function to refresh the session token.
async function refreshToken(request) {
// Create a new session token and add it to the request.
request.sessionToken = new google.maps.places.AutocompleteSessionToken();
return request;
}
window.init = init;
</script>
</body>
</html>```