在 Modal 中具有自動完成功能的 Google 地圖搜索框

Question

是否可以在模式中使用自動完成功能的 Google 地圖搜索框？ 不是整個地圖，只是搜索框。

像這樣的東西：

Answer 1

幾個小時后，我似乎找到了一種方法:)

HTML：

<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="md-form ml-0 mr-0">
                    <!-- Autocomplete location search input -->
                    <div class="form-group">
                        <label>Τοποθεσία:</label>
                        <input type="text" class="form-control" id="search_input" placeholder="Αναζήτηση διεύθυνσης..." />
                        <input type="hidden" id="loc_lat" />
                        <input type="hidden" id="loc_long" />
                    </div>
                    <!-- Display latitude and longitude -->
                    <div class="latlong-view">
                        <p style="text-align: center;">
                            <b>Latitude:</b>
                            <span id="latitude_view"></span>
                            <b>| Longitude:</b>
                            <span id="longitude_view"></span>
                        </p>
                    </div>
                </div>
                <div class="text-center mt-4">
                    <button class="btn btn-cyan waves-effect waves-light" onclick="goTo()" style=" font-size: 1.2rem;">
                        <i class="fa fa-search ml-1"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

Javascript：

/* Google Maps Search handler */
var searchInput = 'search_input';
$(document).ready(function() {
    var autocomplete;
    autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
        types: ['geocode'],
        componentRestrictions: {
            country: "GR"
        }
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var near_place = autocomplete.getPlace();
        document.getElementById('loc_lat').value = near_place.geometry.location.lat();
        document.getElementById('loc_long').value = near_place.geometry.location.lng();

        document.getElementById('latitude_view').innerHTML = near_place.geometry.location.lat();
        document.getElementById('longitude_view').innerHTML = near_place.geometry.location.lng();
    });
});

$(document).on('change', '#' + searchInput, function() {
    document.getElementById('latitude_view').innerHTML = '';
    document.getElementById('longitude_view').innerHTML = '';
});

/* Google Maps - Go to searched location */
function goTo() {
    var lat = Number(document.getElementById("latitude_view").innerText);
    var lon = Number(document.getElementById("longitude_view").innerText);

    console.log(lat);
    console.log(lon);
    if (lat != 0 && lon != 0) {
        map.setCenter({
            lat: lat,
            lng: lon
        });
        map.setZoom(18);
    } else
        alert("Μη αποδεκτές συντεταγμένες");
}
/* END of Google Maps Search handler */

請注意，您必須使用場所庫才能使其工作。

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMap"></script>