jQuery Google지도는 클릭을 기반으로 주소를 얻습니다.

Question

Google지도 기능을 구축 중입니다. 사용자가 버튼을 클릭하면 jquery 스크립트는 텍스트 상자에서 주소를 가져와야 만 제대로 작동하지 않습니다. 아무도 내가 뭘 잘못하고 있는지 알아?

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script> 
<script type="text/javascript" src="<?=base_url()?>data/gmap3.js"></script> 

<script> 
    $(document).ready(function() { 
     function getAddress() { 
      $("#addressClick").click(function() { 
       $('#address').val(); 
      }); 
     } 
     $("#my_map").gmap3({ 
      marker: { 
       address: getAddress() 
      }, map:{ 
       options:{ 
        zoom: 14 
       } 
      } 
     }); 
    }); 
</script> 
<input id="address" type="text" placeholder="Please type in your address"><input type="button" value="Go to location" id="addressClick"> 
<div id="my_map" style=" height: 350px; width: 300px;"></div> 

Answer 1

버튼을 클릭 할 때까지지도를로드하지 않는 것 같습니다. 그러나 페이지가 준비되는 즉시지도를로드하고 있습니다.

address: getAddress() 

기능 getAddress() 더 리턴 값이 없다, 그래서 당신이 속성에 값의 할당 할 때,이 건물은 undefined의 값을 갖습니다 : 그리고 당신은 주소로 undefined 전달된다. 모두 getAddress()는 단추에 클릭 핸들러를 지정합니다. 클릭 핸들러에서 텍스트 상자의 값을 읽지 만 그 값은 무시됩니다.

버튼을 클릭 한 후지도를로드하려면 클릭 핸들러 내에서지도를로드하기 위해 코드를 이동해야합니다. 또한 해당 클릭 핸들러를 getAddress() 기능 외부로 이동하십시오.

$(document).ready(function() { 
    $("#addressClick").click(function() { 
     $("#my_map").gmap3({ 
      marker: { 
       address: $('#address').val() 
      }, map:{ 
       options:{ 
        zoom: 14 
       } 
      } 
     }); 
    }); 
}); 

근무 데모 :jsfiddle.net/wFxDR