I have a form page where users submit a post.
The location section of form
<div class="section">
<h2 class="section-title">
Location
<span class="tooltip">Your location will be displayed on your ad and determines what city it will be posted in.</span>
</h2>
<div class="map-container">
<div id="map"></div>
</div>
<div class="location-section location-limited-width">
<textarea class="form-control"
id="location"
name="listingaddress"
rows="1"
placeholder="Type Address or Postal Code"
required
autocomplete="off"
style="width: 100%; max-width: 500px; margin-right: 10px; resize: none;"></textarea>
<span class="info-text" style="font-size: 14px; font-weight: bold; color: #333;">
<i class="fa fa-info-circle"></i> Type address or postal code and select from the options that appear.
</span>
<span id="error-message" style="color: red; display: none;">
* Your selected address must include a minimum of City or Town.<br>
* You must select from the options that appear in the dropdown box.
</span>
<input type="hidden" id="locality" name="locality" />
<input type="hidden" id="administrative_area_level_1" name="administrative_area_level_1" />
</div>
<!-- Display locality if selected -->
<div id="locality-display" class="locality-display" style="display:none;">
Your item will be listed in <strong><span id="locality-name"></span></strong>
<span class="info-icon"></span>
<span class="tooltip">Your location will be displayed on your ad and determines what city it will be posted in.</span>
</div>
The script
<script>
document.addEventListener('DOMContentLoaded', function() {
let map;
let marker;
const input = document.getElementById('location');
const localityInput = document.getElementById('locality');
const provinceInput = document.getElementById('administrative_area_level_1');
const errorMessage = document.getElementById('error-message');
const localityDisplay = document.getElementById('locality-display');
const localityName = document.getElementById('locality-name'); // Display element for locality
let autocomplete;
let lastInputValue = '';
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 47.5615, lng: -52.7126 }, // Default to St. John's, Newfoundland
zoom: 12 // Adjusted zoom level for a closer view
});
marker = new google.maps.Marker({
position: { lat: 47.5615, lng: -52.7126 }, // Default marker position
map: map
});
}
function extractLocalityAndProvince(result) {
const addressComponents = result.address_components;
const locality = addressComponents.find(component => component.types.includes("locality"));
const province = addressComponents.find(component => component.types.includes("administrative_area_level_1"));
if (locality && locality.long_name) {
localityInput.value = locality.long_name;
localityName.textContent = locality.long_name; // Display locality in the locality-name span
localityDisplay.style.display = 'block'; // Show the locality-display div
errorMessage.style.display = 'none'; // Hide the error message
} else {
clearLocationInput();
showErrorMessage();
}
if (province) {
provinceInput.value = province.long_name;
}
}
function clearLocationInput() {
input.value = ''; // Clear the input box
localityInput.value = ''; // Clear the hidden locality field
localityDisplay.style.display = 'none'; // Hide the locality display
}
function showErrorMessage() {
errorMessage.style.display = 'block'; // Show the error message
}
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setFields(['address_components', 'geometry', 'formatted_address']);
autocomplete.setComponentRestrictions({
country: ['ca'] // Restrict to Canada
});
autocomplete.addListener('place_changed', function() {
const place = autocomplete.getPlace();
// Check if a place was actually selected from the dropdown
if (!place || !place.geometry) {
console.log("No details available for input: '" + input.value + "'");
clearLocationInput(); // Clear any previously set values
showErrorMessage();
return;
}
// Update the map view and marker position
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
// Update the input box and hidden fields for locality and province
input.value = place.formatted_address || '';
extractLocalityAndProvince(place);
});
// Ensure fields update on Enter keypress when using keyboard to select
input.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault(); // Prevent form submission on Enter
google.maps.event.trigger(autocomplete, 'place_changed');
}
});
}
initMap();
initAutocomplete();
input.addEventListener('focus', function() {
this.value = ''; // Clear the input field when focused
});
document.querySelector('form').addEventListener('submit', function(event) {
if (!input.value || input.value.toLowerCase() === 'null') {
event.preventDefault();
alert('Please select a valid location.');
}
});
});
</script>
This form and script works for most users, they are able to select and submit. But some users are getting the "Oops, something went wrong error on the google maps and autocomplete"
I have added logic to capture javascript errors on page and log them to server, such that when it happens again I will have more information. For the time being, I was wondering if anyone knows what the issue could be?
Thanks for reading my question.