javascript - Intermittent Google Maps and Autocomplete failure - Stack Overflow

I have a form page where users submit a post.The location section of form<div class="section&q

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.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1742415960a4439749.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信