키워드로 장소검색하고 목록으로 표출하기 샘플 질문입니다

지도/로컬 API
#1

안녕하세요 ^^
키워드로 장소검색하고 목록으로 표출하기 샘플에서
아래 부분의 태그를 jquery로 바꿔서 불러오면 이상한 현상이 발생합니다 ^^;
검색화면이랑 목록도 지도상 잘 표시되는데
1초 뒤에 자동으로 처음 검색값 "이태원 맛집"으로 돌아와 버립니다 ^^;

<div id="menu_wrap" class="bg_white">
    <div class="option">
        <div>
            <form onsubmit="searchPlaces(); return false;">
                키워드 : <input type="text" value="이태원 맛집" id="keyword" size="15"> 
                <button type="submit">검색하기</button> 
            </form>
        </div>
    </div>
    <hr>
    <ul id="placesList"></ul>
    <div id="pagination"></div>
</div>

#####################################################################
var는 선언했습니다만 글내용에 넣으니 내용들이 다지워져서 뺐습니다

    html = "<div class="+"map_wrap>"
    html += "<div id="+"map"+" style="+"width:100%;height:100%;position:relative;overflow:hidden;"+"></div>"
    html += "<div id="+"menu_wrap"+" class="+"bg_white"+">"
    html += "<div class="+"option"+">"
    html += "<div>"
    html += "<form onsubmit="+"searchPlaces(); return false;"+">"
    html += "키워드 : "+"<input type="+"text"+" value="+"이태원 맛집"+" id="+"keyword"+" size="+"15"+">"
    html += "<button type="+"submit"+">"+"검색하기"+"</button>"
    html += "</form>"
    html += "</div>"
    html += "</div>"
    html += "<hr>"
    html += "<ul id="+"placesList"+"></ul>"
    html += "<div id="+"pagination"+"></div>"
    html += "</div>"
    html += "</div>"

    $("div#test").append(html)
#2

첨부하다 짤린것인지는 모르겠으나
아래 string append로 만든 html은
브라우저가 제대로 파싱하지 못할 위험이 있습니다.
실제 쌍따옴표가 들어갈 부분을 escape하셔야 할 듯합니다.

예를 들어 아래와 같이요.

html += "<div id=\"map\" style=\"width:100%;height:100%;position:relative;overflow:hidden;\"></div>"
#3

답변 감사드립니다 ^^ 잘 해결되었습니다
한가지 더 문의 드립니다 ~
버튼 클릭해서 키워드 검색 창이 나오도록 만들려고 합니다
아래와 같이 클릭 함수 사용했습니다
검색 버튼 눌리면 첫화면은 잘나오는데
다시 검색하면 화면이 초기화 됩니다
버튼이랑 클릭함수가 충돌하나 싶어 구글링
열심히 했는데 답을 못 얻었습니다 ㅡㅡ;
답변 좀 부탁드립니다

//var 삽입시 내용 일부가 삭제되어 제외했습니다

검색
$("#map_keyword_search").click(function(){

    html = "<div class=\"map_wrap\">"
    html += "<div id=\"map\" style=\"width:100%;height:100%;position:relative;overflow:hidden;\"></div>"
    html += "<div id=\"menu_wrap\" class=\"bg_white\">"
    html += "<div class=\"option\">"
    html += "<div>"
    html += "<form onsubmit=\"searchPlaces();return false;\">"
    html += "키워드 : <input type=\"text\" value=\"용산 맛집\" id=\"keyword\" size=\"15\">"
    html += "<button type=\"submit\">검색하기</button>"
    html += "</form>"
    html += "</div>"
    html += "</div>"
    html += "<hr>"
    html += "<ul id=\"placesList\"></ul>"
    html += "<div id=\"pagination\"></div>"
    html += "</div>"
    html += "</div>"

    $("div#test").append(html) }
#4

흐음…
String으로 element를 구성하지 마시고
document에 직접 태그들을 미리 선언한 후에 사용하시길 권해드립니다.
.map_wrap 클래스에 해당하는 태그는 미리 hide() 시켜두시고
버튼을 클릭하면 show() 하도록 될거에요.
이벤트는 $(’#menu_wrap form’).submit() 함수를 이용하여 등록하시고요.

일반적인 상황에서는,
문자열로 HTML Elememnt를 만드는 것 보다.
미리 document에 선언해 두고 그 태그들을 id를 이용해 select 하셔서 제어하시는 것이
많은 부분에서 부작용을 줄일 수 있습니다.

이미 jQuery를 쓰시니 변경은 수월할겁니다.