Flask Google Maps API zur automatischen Vervollständigung JQuery nicht erkannt

Question

ich die einfache Funktion zur automatischen Vervollständigung von Google, so einfach wie in ihrem Beispiel implementieren möchten: Google Autocomplete Example

ich eine zufällige HTML-Seite erstellt und getestet, um den Code mit meiner API-Schlüssel, es hat gut funktioniert.

Jetzt habe ich Schwierigkeiten, diesen Code in meine Kolbenanwendung zu implementieren. Ich erhalte keine Fehler, aber während ich einen Städtenamen bin Eingabe gibt es keine Autovervollständigung und natürlich, wenn ich vorlegen, was ich trat ich einen Fehler:

main.js:38 Uncaught TypeError: Cannot read property 'length' of undefined 

Ich lade meine JQuery und meine JS in meinem Grunde .html am unteren Rand in der Fußzeile (alle meine anderen Seiten dieses einfache hTML erweitert, weil es auch die navbar und Kopf):

{% block footer %} 
<div class="container-fluid" id="footer"> 
<div class="col-sm-4"> 
<p> Footer Element </p> 
<p> Footer Element </p> 
<p> Footer Element </p> 
<p> Footer Element </p> 
</div> 

</div> 

<script type=text/javascript src="{{ url_for('static', filename='js/jquery.min.js') }}"></script> 

<script type=text/javascript src="{{ url_for('static', filename='js/bootstrap.js') }}"></script> 

<script type=text/javascript src="{{ url_for('static', filename='js/main.js') }}"></script> 

{% endblock %} 
{% block googlemapjs %}{% endblock %} 

in meinem main.js gibt es nur den Code aus dem google-Beispiel und nichts weiter. Und in meinem zimmer_einstellen.html Ich versuche, die Funktion zur automatischen Vervollständigung zu implementieren:

{% extends "basic.html" %} 

{% block content %} 
<div class = "container zimmer_einstellen"> 

<table id="address"> 
    <tr> 
    <td class="label">Street address</td> 
    <td class="slimField"><input class="field" id="street_number" 
      disabled="true"></input></td> 
    <td class="wideField" colspan="2"><input class="field" id="route" 
      disabled="true"></input></td> 
    </tr> 
    <tr> 
    <td class="label">City</td> 
    <td class="wideField" colspan="3"><input class="field" id="locality" 
      disabled="true"></input></td> 
    </tr> 
    <tr> 
    <td class="label">State</td> 
    <td class="slimField"><input class="field" 
      id="administrative_area_level_1" disabled="true"></input></td> 
    <td class="label">Zip code</td> 
    <td class="wideField"><input class="field" id="postal_code" 
      disabled="true"></input></td> 
    </tr> 
    <tr> 
    <td class="label">Country</td> 
    <td class="wideField" colspan="3"><input class="field" 
      id="country" disabled="true"></input></td> 
    </tr> 
</table> 
</div> 

{% endblock %} 

{% block googlemapjs %}<script src="https://maps.googleapis.com/maps/api/js?key=HEREISAPIKEY&libraries=places&callback=initAutocomplete" 
    async defer></script>{% endblock %} 

ich schon so viele Möglichkeiten tryed haben es in der Flasche zu implementieren, aber nichts funktionierte, der Code selbst ist Okay, denn auf einer einzelnen HTML-Seite funktioniert es gut. Was vermisse ich?

EDIT:

I() Funktion onload nur eine einfacher Alarm getestet, die als gut gearbeitet taten nicht, so jQuery gar nicht erkannt wird, aber der Weg ist richtig (ich den Weg über die HTML-Ansicht überprüft in Browser)

EDIT 2:

okay, so das Problem ist seltsam, meine jQuery ist nur auf dem basic.html selbst erkannt, aber auf keinem der Seiten, die die grundlegenden hTML erweitern. Wie behebe ich das?

Answer 1

Sie rufen nicht die geolocate() Funktion in Ihrem HTML auf. Ich sehe auch nicht, wie es auf einer einzelnen HTML-Seite funktionieren wird.

Vom Googles Beispiel müssen Sie diese hinzufügen:

<div id="locationField"> 
     <input id="autocomplete" placeholder="Enter your address" 
      onFocus="geolocate()" type="text"></input> 
</div> 

---

Auch, wie bereits in der vorherigen Frage diskutiert, das ist kein jQuery Problem. Und AFAIK Google APIs funktionieren auf localhost.

Können Sie vielleicht sagen, was die Entwicklerkonsole sagt. (Seite öffnen -> Konsolenprotokoll öffnen (f12 in Chrom) -> Seite aktualisieren)