[jQuery]iframeを動的に追加して,googlemapを表示させる

<input type="text"   id="txtAddress" value="東京都千代田区丸の内一丁目" size="30" />
<input type="button" id="btnTest"    value="iframe追加"/>
<div style="width:380px;height:310px;background-color:#FF9;" id="test"></div>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
$( function(){
    $("#btnTest").click( function() {
        var address   = $( "#txtAddress" ).val();
        var searchKey = encodeURI( address );
        var zoom = 16;
 
        var iframeText;
        iframeText  = '<iframe width="380" height="310" ';
        iframeText +=         'frameborder="0"  scrolling="no"';
        iframeText +=         'marginheight="0" marginwidth="0"';
        iframeText +=         'src="http://maps.google.co.jp/maps?f=q&amp;source=s_q&amp;hl=ja&amp;&amp;q=' +searchKey+ '&amp;ie=UTF8&amp;z=' +zoom+ '&amp;iwloc=B&amp;output=embed">';
        iframeText += '</iframe>';
 
        $("#test").append( iframeText );
    });
});
</script>