2026, 새로운 도약을 시작합니다.

여분필드값으로 카카오 지도 보이려면 채택완료

글쓰기에서 지도검색 후 선택 방식 말고

여분필드 가령 w_9 값 입력만으로

글보기에서 카카오 지도 보여줄 수 있을까요?

view 페이지 코드 부탁드립니다.

답변 2개

채택된 답변
+20 포인트

wr_9 에 주소를 입력하고..

그 주소로 지도에 표시할 수 있습니다.

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 8개

wr_9 를 어떻게 넣으면 될까요?

------------------------------------

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);
}
});
제주특별자치도 제주시 첨단로 242
이 부분을 아래 소스로 변경
<?php echo $view['wr_9'] ?>
즉,
geocoder.addressSearch('<?php echo $view['wr_9'] ?>', function(result, status) {
주소 값으로 지도보이기 도움주셔서 고맙습니다~
지도 밑에 로드뷰도 보이게 하려는데
https://apis.map.kakao.com/web/sample/
둘러보아도 잘 모르겠네요 ㅜㅜ

여분필드 wr_9 값으로 보이는 지도 밑으로
로드뷰를 보이고 싶은데
코드를 어떤 것을 넣으면 될까요?
기존 소스에 아래 부분만 추가해주면 되는 겁니다.

// 지도에 로드뷰 정보가 있는 도로를 표시하도록 지도타입을 추가합니다
map.addOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW);
기존 지도가 로드뷰 정보가 있는 지도로 바뀌는 것 말고,
기존 지도가 위에 보이고
밑으로 별도 로드뷰(실사진) 지도가 추가로 보이게 하고 싶어서요.
그럼 지도를 2개 표시하면 될것 같네요..
변수나 id 가 겹치는 부분은 변경을 해줘야 합니다.
아 말씀처럼 지도 스크립트를 두개 넣으면 되겠군요.
그런데 카카오 지도 예제 페이지에서
일반 지도는 주소(여분필드)로 장소표시하기 스크립트가 있는데
로드뷰는 주로(여분필드)만으로 보이도록하는 스크립트 예제가 없네요.
카카오맵은 기능을 중복해서 넣을 수 있습니다.
주소로 표시하고 추가로 로드뷰하고.. 2가지 같이 사용 가능.

댓글을 작성하려면 로그인이 필요합니다.

카카오 지도 API 사용하기 (openai.com)

Copy




    function initMap() {

        var mapContainer = document.getElementById('map');

        var mapOptions = {

            center: new kakao.maps.LatLng(37.5665, 126.9780),

            level: 8

        };

        var map = new kakao.maps.Map(mapContainer, mapOptions);

        var w_9 = 123.456; // 여기에 w_9 값을 받아온 값으로 할당

        // w_9 값을 이용하여 적절한 좌표로 설정

        var markerPosition = new kakao.maps.LatLng(w_9, /*다른좌표*/); // w_9 값을 사용하여 좌표 생성

        // 마커 생성

        var marker = new kakao.maps.Marker({

            position: markerPosition

        });

        // 마커를 지도에 표시

        marker.setMap(map);

    }

    window.onload = function () {

        initMap();

    };



 

Copy




var coordinates = w_9.split('.'); // `.`로 구분된 좌표 값을 배열로 분리

var latitude = parseFloat(coordinates[0]); // 위도

var longitude = parseFloat(coordinates[1]); // 경도

var markerPosition = new kakao.maps.LatLng(latitude, longitude); // 좌표 생성

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고