Ist es möglich, Google Map zu verbergen, aber die Suchleiste zu behalten?

Question

Ich versuche, eine Startseite mit nur einer Suchleiste zu erstellen, die eine Google Places-Suchleiste ist. Ich möchte dann die Google Map Ergebnisse auf der nächsten Seite zusammen mit der Stadt, die sie gesucht haben, anzeigen.

Ich habe nur Beispiele gefunden, wie das Suchfeld und die Benutzeroberfläche der Google Map ausgeblendet werden.

Gibt es eine Möglichkeit, Google Maps zu verwenden & Orte api, aber verstecken Sie die Karte und behalten Sie die Suchfunktion aus dem Suchfeld?

Answer 1

Sie brauchen nicht ein google.maps.Map Objekt die Places SearchBox

Code-Schnipsel zu verwenden:

function initAutocomplete() { 
 
    // Create the search box and link it to the UI element. 
 
    var input = document.getElementById('pac-input'); 
 
    var searchBox = new google.maps.places.SearchBox(input); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#pac-input { 
 
    background-color: #fff; 
 
    font-family: Roboto; 
 
    font-size: 15px; 
 
    font-weight: 300; 
 
    margin-left: 12px; 
 
    padding: 0 11px 0 13px; 
 
    text-overflow: ellipsis; 
 
    width: 300px; 
 
} 
 
#pac-input:focus { 
 
    border-color: #4d90fe; 
 
} 
 
.pac-container { 
 
    font-family: Roboto; 
 
} 
 
#type-selector { 
 
    color: #fff; 
 
    background-color: #4d90fe; 
 
    padding: 5px 11px 0px 11px; 
 
} 
 
#type-selector label { 
 
    font-family: Roboto; 
 
    font-size: 13px; 
 
    font-weight: 300; 
 
} 
 
#target { 
 
    width: 345px; 
 
}

<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete" async defer></script>

Answer 2

Sie können die Suchleiste für die automatische Vervollständigung getrennt von der Karte anzeigen lassen.

See: https://developers.google.com/maps/documentation/javascript/places-autocomplete#add_autocomplete

var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-33.8902, 151.1759), 
    new google.maps.LatLng(-33.8474, 151.2631)); 

var input = document.getElementById('searchTextField'); 
var options = { 
    bounds: defaultBounds, 
    types: ['places'] 
}; 

autocomplete = new google.maps.places.Autocomplete(input, options);