상품 상세 정보 탭에 다음 지도 표시

다음 지도를 추가하는 상황별로 방법 정리가 돼 있는 Daum 지도 Web API Sample 참고

// 구글맵이 국내 주소를 표시 못 하는 경우가 있어서 다음 지도로 교체 
add_action( 'custom_add_daumMap_after_product_description', 'daumMap_by_host_input_address' );
function daumMap_by_host_input_address() {
    $product_id = get_the_ID();
    $place      = get_post_meta($product_id, 'wcv_custom_product_address', true); // 주소

  if ($place) { ?> 

    <div id="map" style="width:100%;height:400px;"></div> <!-- 지도가 표시될 크기 -->

    <script
        type="text/javascript"
        src="//dapi.kakao.com/v2/maps/sdk.js?appkey=( 발급받은 javascript앱키 입력 )&libraries=services"></script>
    <script>
        var mapContainer      = document.getElementById('map'), // 지도를 표시할 div
            mapOption = {
                center: new daum.maps.LatLng(37.51476, 126.89758), // 지도의 중심좌표 (위도,경도) - 사무실 위치
                level : 6 // 지도의 확대 레벨
            };

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

        // 지도에 확대 축소 컨트롤을 생성한다
        var zoomControl = new daum.maps.ZoomControl();
        // 지도의 우측에 확대 축소 컨트롤을 추가한다
        map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

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

        // 주소로 좌표를 검색합니다
        geocoder.addressSearch('<?php echo $place; ?>', function (result, status) {

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

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

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

                // 인포윈도우로 장소에 대한 설명을 표시합니다
                var infowindow = new daum.maps.InfoWindow({
                        content: '<div style="padding:5px;">촬영장소 <a href="http://map.daum.net/link/search/<?php echo $place; ?>" style="color:blue" target="_blank">큰지도 보기</a></div>'
                    });
                infowindow.open(map, marker);

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

    <?php }
}

single-product 컨텐츠 부분에 do_action으로 custom_add_daumMap_after_product_description 훅을 만들어 두고, 해당 위치에 구조를 추가하는 방법 사용했습니다.
woocommerce template / description.php 파일에 추가.
<?php do_action(‘custom_add_daumMap_after_product_description’); // 다음 지도 추가용 액션 등록 ?>

상품 정보 편집 시 ‘wcv_custom_product_address’라는 사용자 정의 메타 정보를 추가 입력 받도록 하여, 여기에 입력된 주소를 가지고 다음 API가 좌표 검색을 하도록 수정하였습니다.

마커 위쪽에 인포 윈도우를 띄우는 방법을 활용하여, 다음지도 사이트로 위치 정보를 가지고 이동할 수 있는 링크를 추가하여 상세 지도 보기나, 길찾기가 가능하도록 하였습니다.

woocommerce product & 다음 지도