Google지도 검색 상자 APi, 초기로드 후 검색 상자가 표시되지 않음

Question

Google 검색 상자와 함께 Google지도 API를 사용하고 있습니다.

예. 여기 내 DOM에서 https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

나는 다음 HTML

<div id="mapdialog"> 
<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
<div id="map-canvas"></div> 
</div> 

그리고에게이이 처음 인 경우 사용자가 내 "지도"버튼을

$("#gMap,#gMapSide").click(function() { 
    var geoUrl = "http://maps.googleapis.com/maps/api/geocode/json?address=" + county + "&sensor=true"; 
    $.ajax({ 
     url: geoUrl, 
     context: document.body 
    }).done(function (data) { 
     ne = data.results[0].geometry.viewport.northeast; 
     se = data.results[0].geometry.viewport.southwest; 
     initialize(ne.lat, ne.lng, se.lat, se.lng); 
    }); 
    return false; 
}); 

을 안타 때 호출 구글 API의 GET의 MAP가 잘 작동하면 검색 창이 표시됩니다. 그러나 사용자가지도 버튼을 두 번째로 누르면지도가 계속로드되지만 검색 창은 없습니다.

당신이 구글에서 초기화 코드를 보면, 그것은 그래서는 DOM에서 사라 기 때문에 정보 검색이 두 번째 클릭하지가 이유가 있다고 생각 상자를 잡고지도

var input = /** @type {HTMLInputElement} */(
    document.getElementById('pac-input')); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

에 넘겨 준다?

모든 의견을 환영합니다!

Answer 1

답이 적고 해결 방법이 많지 않습니다. 다음과 같이 div에 컨트롤을 래핑하는 경우 :

<div id="inputWrapper"> 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
</div> 

그런 다음 jQuery를 사용하여 매번 다시 연결할 수 있습니까?

$("#gMap,#gMapSide").click(function() { 
    //Instantiate Variable 
    var pac-input = '<input id="pac-input" class="controls" type="text" placeholder="Search Box">'; 
    //Append to element. 
    pac-input.appendTo($('#inputWrapper')); 
    var geoUrl = "http://maps.googleapis.com/maps/api/geocode/json?address=" + county + "&sensor=true"; 
    $.ajax({ 
     url: geoUrl, 
     context: document.body 
    }).done(function (data) { 
     ne = data.results[0].geometry.viewport.northeast; 
     se = data.results[0].geometry.viewport.southwest; 
     initialize(ne.lat, ne.lng, se.lat, se.lng); 
    }); 
    return false; 
}); 

당신이하지과 같이 구글 함수에 DOM 요소 대신 JQuery와 객체를 첨부 할 수 아마도

간단한 해결책, 편집 :

var pac-input = '<input id="pac-input" class="controls" type="text" placeholder="Search Box">'; 
var input = /** @type {HTMLInputElement} */(
    pac-input); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

는주의, 즉 테스트되지 않았으므로 예상대로 작동하지 않을 수 있습니다.

또 다른 편집

또 다른 옵션이 가능지도 호출로 원래의 요소를 복제하는 것입니다.

var input = /** @type {HTMLInputElement} */(
    document.getElementById('pac-input').clone()); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

희망 중 하나가 도움이됩니다.

Answer 2

내가 한 것은 DOM 입력 요소를 간단한 문자열로 만든 다음지도를 유지하는 부분에 추가하는 경우입니다 (사용자의 경우 #mapdialog). 그 후에는 단순히 document.getElementById()을 사용하여 픽업 할 수 있으며 그 요소는 새로운 google.maps.places.SearchBox()의 입력으로 입력으로 제공 될 수 있습니다. 아래 스 니펫을보십시오.

var pacinput = "<input id='pac-input' class='controls' type='text' placeholder='Search Box' />"; 
    $('#mapdialog').append(pacinput); 
    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

그러나 Swires가 제공 한 옵션은 실제로 나를 위해 작동하지 않습니다. 내 경우에는 그것이 Uncaught typeError: Cannot read property 'zIndex' of undefined.을 유발했습니다. 왜냐하면 문서가로드 될 때 PHP 문자열로 자바 스크립트를 작성하기 때문일 수 있습니다. 정확한 이유가 확실하지 않습니다.