플라스크 Google지도 API 자동 완성 jQuery를 인식하지

Question

나는 그들의 예에서와 같이 간단하게 구글에서 간단한 자동 완성 기능을 구현하려는

: Google Autocomplete Example

내가 임의의 HTML 페이지를 만들어 내 API 키를 사용하여 코드를 테스트 괜찮 았어.

이제이 코드를 내 플라스크 응용 프로그램에 구현하는 데 어려움을 겪고 있습니다. 나는 오류를 얻을,하지만 난 CityName이 들어가는 동안 오전에는 자동 완성이 없다 물론 나는 오류 얻을 내가 입력 제출하면하지 않습니다

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

내 기본에 내 jQuery를 내 JS로드 오전 내 main.js에서

{% 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 %} 

에만 코드가 구글의 예에서있다 : (또한 네비게이션 바에과 머리가 있기 때문에, 내 다른 페이지의 모든이 기본 HTML을 확장) 바닥 글에 맨 아래에 .html 파일 아무것도 더.

{% 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 %} 

, 이미 플라스크에 그것을 구현하는 많은 가능성을 tryed했지만 아무 일없는 코드 자체는 다음과 같습니다 그리고 내 zimmer_einstellen.html에서 나는 자동 완성 기능을 구현하기 위해 노력하고 좋아, 하나의 HTML 페이지에서 제대로 작동하기 때문에. 내가 뭘 놓치고 있니? jQuery를 전혀 인정하지만, 경로가 올바른지되지 않도록 난 그냥, aswell 일 didnt한다 단순한 경고() 함수의 온로드를 테스트

(전에서 HTML보기를 통해 경로를 검사 : 편집

브라우저)

편집 2 : 문제가 이상해

좋아, 그래서 내 jQuery를 만 basic.html 자체에 있지만, 기본 HTML을 확장 페이지의 없음에 인식됩니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

당신은 html로 geolocate() 함수를 호출하지 않습니다. 나는 그것이 하나의 HTML 페이지에서 어떻게 작동 하는지를 보지 못했다. 구글의 예에서

, 당신은이를 추가해야합니다 : 이미 이전 질문에서 설명한

또한

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

---

이, 이것은 jQuery를 문제가 아닙니다. AFAIK Google API는 localhost에서 작동합니다.

개발자 콘솔에 무엇을 말할 수 있습니까? (열기 페이지 -> 콘솔 로그 열기 (크롬에서 f12) -> 새로 고침 페이지)