Google Places API 自动完成，如何添加第二个地址

Question

我需要在同一个网页上搜索两个地址，一个用于位置，一个用于通信。第一个 Google API 地址工作正常，然后我尝试复制函数并修改它，但它没有填充第二个地址，它总是尝试填充第一个地址，谁能告诉我哪里出错了？感谢您的帮助。

    function initMap() {
            const componentForm = [
                'street_number',
                'route',
                'location',
                'locality',
                'administrative_area_level_2',
                'postal_code',
            ];
            const autocompleteInput = document.getElementById('location');
            const options = {
                types: ['(cities)'],
                componentRestrictions: { country: 'gb' }
            };

            const autocomplete = new google.maps.places.Autocomplete(autocompleteInput);
            autocomplete.addListener('place_changed', function () {
                const place = autocomplete.getPlace();
                if (!place.geometry) {
                    // User entered the name of a Place that was not suggested and
                    // pressed the Enter key, or the Place Details request failed.
                    window.alert('No details available for input: \'' + place.name + '\'');
                    return;
                }
                fillInAddress(place);
            });

            function fillInAddress(place) {  // optional parameter
                const addressNameFormat = {
                    'street_number': 'short_name',
                    'route': 'long_name',
                    'locality': 'long_name',
                    'administrative_area_level_2': 'short_name',
                    'postal_code': 'short_name',
                };
                const getAddressComp = function (type) {
                    for (const component of place.address_components) {
                        if (component.types[0] === type) {
                            return component[addressNameFormat[type]];
                        }
                    }
                    return '';
                };
                document.getElementById('location').value = getAddressComp('street_number') + ' '
                    + getAddressComp('route');
                for (const component of componentForm) {
                    // Location field is handled separately above as it has different logic.
                    if (component !== 'location') {
                        document.getElementById(component).value = getAddressComp(component);
                    }
                }
            }
        }

    function initMapAddress2() {
            const componentForm = [
                'street_number',
                'route',
                'location',
                'locality',
                'administrative_area_level_2',
                'postal_code',
            ];
            const autocompleteInput = document.getElementById('location2');
            const options = {
                types: ['(cities)'],
                componentRestrictions: { country: 'gb' }
            };

            const autocomplete2 = new google.maps.places.Autocomplete(autocompleteInput);
            autocomplete2.addListener('place_changed', function () {
                const place2 = autocomplete2.getPlace();
                if (!place2.geometry) {
                    // User entered the name of a Place that was not suggested and
                    // pressed the Enter key, or the Place Details request failed.
                    window.alert('No details available for input: \'' + place2.name + '\'');
                    return;
                }
                fillInAddress(place2);
            });

            function fillInAddress(place2) {  // optional parameter
                const addressNameFormat = {
                    'street_number2': 'short_name',
                    'route2': 'long_name',
                    'locality2': 'long_name',
                    'administrative_area_level_22': 'short_name',
                    'postal_code2': 'short_name',
                };
                const getAddressComp = function (type) {
                    for (const component of place2.address_components) {
                        if (component.types[0] === type) {
                            return component[addressNameFormat[type]];
                        }
                    }
                    return '';
                };
                document.getElementById('location2').value = getAddressComp('street_number2') + ' '
                    + getAddressComp('route2');
                for (const component of componentForm) {
                    // Location field is handled separately above as it has different logic.
                    if (component !== 'location2') {
                        document.getElementById(component).value = getAddressComp(component);
                    }
                }
            }
        }

<div class="card-container">
        <div class="panel">
            <div>
                <img class="sb-title-icon" src="https://fonts.gstatic.com/s/i/googlematerialicons/location_pin/v5/24px.svg" alt="">
                <span class="sb-title">Correspondence Address</span>
            </div>
            <input type="text" placeholder="Search Address" id="location" />
            <input type="text" placeholder="" id="street_number" />
            <input type="text" placeholder="" id="route" />
            <input type="text" placeholder="" id="locality" />
            <div class="half-input-container">
                <input type="text" class="half-input" placeholder="" id="administrative_area_level_2" />
                <input type="text" class="half-input" placeholder="" id="postal_code" />
            </div>
        </div>
    </div>

<script src="https://maps.googleapis.com/maps/api/js?key=****************Zv_k&libraries=places&callback=initMap&channel=GMPSB_addressselection_v1_cA" async defer></script>
<div class="card-container">
        <div class="panel">
            <div>
                <img class="sb-title-icon" src="https://fonts.gstatic.com/s/i/googlematerialicons/location_pin/v5/24px.svg" alt="">
                <span class="sb-title">Location Address</span>
            </div>
            <input type="text" placeholder="Search Address" id="location2" />
            <input type="text" placeholder="" id="street_number2" />
            <input type="text" placeholder="" id="route2" />
            <input type="text" placeholder="" id="locality2" />
            <div class="half-input-container">
                <input type="text" class="half-input" placeholder="" id="administrative_area_level_22" />
                <input type="text" class="half-input" placeholder="" id="postal_code2" />
            </div>
        </div>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?key=****************Zv_k&libraries=places&callback=initMapAddress2&channel=GMPSB_addressselection_v1_cA" async defer></script>

Answer 1

对于遇到相同问题的其他人，我在这里找到了解决方案 Multiple Address on same page