Wie fügt man Orte Autocomplete Box in einem Google Maps InfoWindow?

Question

Ich verwende Google Maps JavaScript API v3 und versuche, in einem InfoWindow, das angezeigt wird, wenn der Benutzer auf einen Marker klickt, ein AutoComplete-Feld für Orte einzufügen.

Ich weiß, wie man ein Autocomplete-Objekt erstellt, und ich weiß, wie man ein Infofenster erstellt, das nur Texteingabe aufnimmt, aber ich weiß nicht, wie ich mein Autocomplete-Objekt in mein Infowindow setzen kann.

Dies ist, was ich unter anderem versucht habe, aber in diesem Fall der Ort, an dem ich die Auto-Complete-Box nur sagen möchte "Route berechnen von: [Objekt Objekt]". Dies ist in der InfoWindow.

Adresse ist die Adresse meines Markers, die gut funktioniert.

Hier ist mein Code-Schnipsel:

var autocomplete = new google.maps.places.Autocomplete(); 
    var infoWindowContent = [ 
     '<div id="directions-to-here"> Get directions from:', 
     autocomplete, 
     '<p> to: </p>' + address 
    ].join('<br>'); 

    var infoWindowOptions = { 
     content: infoWindowContent, 
     position: position 
    } 
    var infoWindow = new google.maps.InfoWindow(toHereWindowOptions); 
    infoWindow.open(map); 

ich durch die Schaffung der zum automatischen Vervollständigung Aufgabe löst auch das Problem versucht, nach dem Info-Fenster Inhalt Einstellung, ohne Glück:

var infoWindowContent = [ 
    '<div id="directions-to-here"> Get directions from:', 
    '<input id="autocomplete" class="controls" type="text" 
    placeholder="Enter a starting location">', 
    '<p> to: </p>' + address 
].join('<br>'); 

var autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */ (
    document.getElementById('autocomplete'))); 

Vielen Dank für Ihre Hilfe !

Answer 1

Dies kann durch Platzieren eines Places Search Box im Infofenster geschehen. Bitte beachten Sie die Orte Suchfeld Dokumentation hier:

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

zuerst den Inhalt Zeichenfolge festgelegt:

var contentString = '<input id="pac-input" class="controls" type="text" placeholder="Search Box">'; 

dann innerhalb des Klick Zuhörer für den Marker, der die Infofenster öffnet sich:

marker.addListener('click', function() { 
infowindow.open(map, marker); 
var input = document.getElementById('pac-input'); 
var searchBox = new google.maps.places.SearchBox(input); 
}); 

Ich habe Googles Infowindow-Beispiel here geändert, um ein Suchfeld im Infowindow zu haben, das automatisch vervollständigt wird Adressen. Bitte beachten Sie meine JSFiddle hier:

https://jsfiddle.net/dpx9o1mo/1/

Hinweis Ich habe redigiert meinen API-Schlüssel für die Sicherheit. Bitte geben Sie Ihr eigenes ein, um dieses Beispiel zu verwenden.

Ich hoffe, das hilft!