동적으로 주소 자동 완성 API를 생성하는 방법

Question

숫자 주소 생성기를 생성하고 버튼 클릭시 ajax를 통해 수행 할 수있는 json 형식 출력을 얻어야합니다. 하지만 어떻게 동적으로 자동 완성을 생성하고 물건을 별도로 얻을 Google API를 사용할 수 없어요.

필자는이 바이올린에 첨부 된 것과 정확히 같은 유형의 디자인을 보여줄 필요가 있습니다.

initialize(); 

var placeSearch, autocomplete; 
var componentForm = { 
    street_number: 'short_name', 
    route: 'long_name', 
    locality: 'long_name', 
    administrative_area_level_1: 'short_name', 
    country: 'long_name', 
    postal_code: 'short_name' 
}; 

function initialize() { 
    autocomplete = new google.maps.places.Autocomplete(
     /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), 
     { types: ['geocode'] }); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    fillInAddress(); 
    }); 
} 

function fillInAddress() { 
    var place = autocomplete.getPlace(); 

    for (var component in componentForm) { 
    document.getElementById(component).value = ''; 
    document.getElementById(component).disabled = false; 
    } 

    for (var i = 0; i < place.address_components.length; i++) { 
    var addressType = place.address_components[i].types[0]; 
    if (componentForm[addressType]) { 
     var val = place.address_components[i][componentForm[addressType]]; 
     document.getElementById(addressType).value = val; 
    } 
    } 
} 
function geolocate() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var geolocation = new google.maps.LatLng(
      position.coords.latitude, position.coords.longitude); 
     autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, 
      geolocation)); 
    }); 
    } 
} 

http://jsfiddle.net/6BcUD/

현재 나는 3 형식을 추가했습니다,하지만 난 내가 JQuery와 APPEND를 사용하여 수행 할 수 있습니다 생각 "양식을 추가"버튼을 통해 추가해야합니다. 그러나 Google 자동 완성에서 작동하도록 만드는 방법은 무엇입니까? 여러 형태의 관리를 다시 사용하려면

감사

Answer 1

자바 스크립트 코드는 DOM 요소 ID를 기반으로 더 "일반적인"가 아니라해야합니다.

자동 완성 인스턴스를 포함하는 전역 변수는 좋은 생각이 아닙니다.

나는 (내가 의지 할 수 가정 있도록 jQuery를 태그를 넣어) 당신의 jsFiddle 당신에게 jQuery를 기반 솔루션을 제안 편집 : 난 형태는 #addForm 버튼을 cliking 이후에 추가됩니다 사업부 #addressForms을 정의

• 숨겨진 div #template에 양식 makup을 감쌌습니다. 당신이 #addForm에 클릭 할 때마다이 템플릿 내용이 자동 완성으로 초기화 및 DOM 요소 ID가 고유해야합니다으로 #addressForms
• 에 추가, 복사됩니다, 당신의 폼 요소 ID를 제거하고 난도 제거
• CSS 클래스로 사용 글로벌 VAR componentForm 각 필드 요소

에 추가 데이터 (data-type)는 jsFiddle 경우 발을 사용자의 요구에 보라.

편집 :

나는 당신의 의견에 따라이 jsFiddle를 만들었습니다. 아직 끝나지 않았지만 도움이 될 수 있습니다.