1. Home
  2. Docs
  3. woocommerce product & 다음 지도
  4. 상품 상세 정보 탭에 다음 지도 표시

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

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

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가 좌표 검색을 하도록 수정하였습니다.

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