카카오맵 관련 질문 드립니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
카카오맵 관련 질문 드립니다.

QA

카카오맵 관련 질문 드립니다.

본문

주소를 검색하고 주소창에 입력되면 해당 주소를 지도로 보여줘야 되는데 변화가 없네요

조언 좀 부탁드립니다."감사합니다"

 

(아래는 글쓰기 창입니다.)

 

<div class="bo_w_info write_div">

<label for="wr_1" class="sound_only">상세주소</label><button id="postcodify_search_button">주소검색클릭</button><br />
  <input type="text" name="wr_1" value="<?=$write['wr_1']?>" id="wr_1" class="frm_input full_input postcodify_jibeon_address postcodify_details" size="50" maxlength="255" placeholder="상세주소">
</div>


<div class="100%">

<div id="daumRoughmapContainer1580398119673" class="root_daum_roughmap root_daum_roughmap_landing"></div>
    <script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
    <script charset="UTF-8">
new daum.roughmap.Lander({
      "timestamp" : "1580398119673",
      "key" : "wsuw",
                                                "mapWidth" : "100%",
      "mapHeight" : "360"
     }).render();
    </script>
   </div>

<!-- jQuery와 Postcodify를 로딩한다 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>

<!-- "검색" 단추를 누르면 팝업 레이어가 열리도록 설정한다 -->
<script> $(function() { $("#postcodify_search_button").postcodifyPopUp(); }); </script>

<script>

 //지도를 미리 생성한다.
                        var map = new daum.maps.Map(mapContainer, mapOption);

                         //주소-좌표 변환 객체를 생성
                        var geocoder = new daum.maps.services.Geocoder();

                         //마커를 미리 생성
                        var marker = new daum.maps.Marker({
                             position: new daum.maps.LatLng(37.537187, 127.005476),
                             map: map
                         });


// 해당 주소에 대한 좌표를 받는다.
                                            var coords = new daum.maps.LatLng(result.y, result.x);
                                             // 지도를 보여준다.
                                             mapContainer.style.display = "block";
                                             map.relayout();
                                             // 지도 중심을 변경한다.
                                             map.setCenter(coords);
                                             // 마커를 결과값으로 받은 위치로 옮긴다.
                                             marker.setPosition(coords)
                                         }
                                         });
                                 }
                             }).open();
                         }
                     </script>

이 질문에 댓글 쓰기 :

답변 1

https://apis.map.kakao.com/web/sample/addr2coord/

이 소스를 사용해야 합니다.

알려주신대로 했는데요 지도가 보이질 않아요 ㅠ

<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    }; 

// 지도를 생성합니다   
var map = new kakao.maps.Map(mapContainer, mapOption);

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

// 주소로 좌표를 검색합니다
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {

    // 정상적으로 검색이 완료됐으면
    if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    }
});   
</script>

<!-- jQuery와 Postcodify를 로딩한다 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>

<!-- "검색" 단추를 누르면 팝업 레이어가 열리도록 설정한다 -->
<script> $(function() { $("#postcodify_search_button").postcodifyPopUp(); }); </script>

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT