Google지도 API가 각도보기에서 작동하지 않습니다.

"장소"입력란에 간단한 자동 완성 기능을 사용하려면 Google map apis를 사용하려고합니다. 각도 라우팅을 사용하고 있습니다.Google지도 API가 각도보기에서 작동하지 않습니다.

주요 템플릿의 <head>에서 구글에 의해 주어진 개발자를위한 지침을 따라 내가 가진 :

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
<script src="js/googleAutocomplete.js"></script>

을 googleAutocomplete.js이

function initializeGoogleApi() { 
    var input = document.getElementById('CityInput'); 
    var options = { 
     types: ['(cities)'] 
    }; 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 
}

과 내가 가지고있는 뷰 중 하나입니다

<input id="CityInput" type="text" name="place" ng-model="profile.place">

이 입력란에는 자동 완성이 있어야합니다. ete 서비스를 제공하지만 작동하지 않습니다.

그러나 입력란을 기본 템플릿 (보기가 아닌)에 배치하면 자동 완성 기능이 작동합니다.

보기에서 무엇이 잘못되었는지 알 수 없습니다. 나는 onload="initializeGoogleApi()" 을 모두 body 태그 (주 템플릿)와보기의 바깥 쪽 div에 넣어 두었습니다. 성공하지 못했습니다.

제안 사항? 감사합니다.

출처

2014-09-05 ZzKr

아마도 최소한의 작업 코드를 여기에 게시하거나 게시 할 수 있습니까? – alpinescrambler

뷰의 html이 선택 될 때까지 DOM에 없으므로 본문의 onload 이벤트가 트리거 될 때 입력 상자가 존재하지 않습니다. initializeGoogleApi의 입력 값이 null입니다 ...

div에서 Onload가 작동하지 않습니다. here을 참조하십시오.

내가 작동하도록 할 수있는 유일한 방법은 해당 경로의 컨트롤러에 초기화를 넣는 것이 었습니다.

출처

2014-09-05 19:40:59 marneborn

감사합니다. 이제는 문제를 이해하고 있다고 생각합니다. {...}) '$의 scope.initialize = 기능 (;' 및 호출 : 컨트롤러의 초기화를 넣어 약 , 당신은 같은 것을 의미합니까 '$의 scope.initialize을(); '? 그렇다면 입력 텍스트를 어떻게 선택 하시겠습니까? 'var input = document.getElementById ('CityInput'); ' 'ng-model'을 사용하고 계신지요? – ZzKr

뷰를로드 할 때 $ scope.initialize = function() {...};을 호출하고 $ scope.initialize();를 호출합니다. 나는 입력 상자의 자동 완성 된 값을'document.getElementById ('CityInput'). value;'로 얻는다. 모든 것이 완벽하게 작동합니다. – ZzKr

Google지도 API가 각도보기에서 작동하지 않습니다.

답변

관련 문제