질문/공유질답게시판

카카오 맵 api 일반 게시판에 사용방법

masterhwan
Extra Form
CMS XpressEngine

카카오맵을 일반 웹페이지 게시판 내에 넣고 싶어서 아래 코드를 넣었습니다

 
<div style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script><script>var mapContainer = document.getElementById('map'), // 지도를 표시할 div     mapOption = {         center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표        level: 3 // 지도의 확대 레벨    };// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다var map = new kakao.maps.Map(mapContainer, mapOption); </script>

 
그런데 빈 공간만 나타나고 지도가 나타나지 않습니다

 
제로보드로 만든 게시판에 카카오맵을 넣고 싶은데 어떻게 해야 할가요?
위로 아래로
댓글 13
  • ?
    발급받은 APP KEY를 사용하세요

    부분에.. 발급받은 APP Key 를 넣어주셔야합니다.
  • profile

    윗분 말씀에 더하여...

    • <div>에 id="map"이 들어가야 합니다.
    • 복붙하신 코드에 줄바꿈이 잘못된 것 같습니다. 원본과 비교하여 정확하게 줄을 나눠 주세요.
    • 만약 게시물 본문에다가 지도를 넣으실 생각이라면 관리자만 할 수 있으니 참고하세요. 일반 회원은 스크립트 사용이 허용되지 않으니까요. 스킨을 직접 수정해서 소스를 집어넣으신다면 상관없습니다.
    • 제로보드가 아닙니다.
  • profile profile
    <div id="map">은 가장 위에 넣어 주면 되나요?
  • profile

    <div id="map"> 은 실제로 카카오API와 연계되어 지도 이미지가 로드되는 영역입니다.
    따라서 게시글을 읽는화면에서 출력되고자 한다면 글내용이 출력될 부분 위 쯤에 넣어주시는게 좋겠지요

    카카오개발자 페이지를 보면 example 들이 있습니다. 해당 문서 참고하시면 쉽습니다.

     

    그리고 <div id="map"> 만 넣으면 닫힘태그가 없기때문에 전체적인 모양새가 비뚤어지거나

    지도가 제대로 표시 안될가능성이 있습니다.

     

    <div id="map"></div> 형식으로 정확하게 입력하셔야 합니다.

  • profile

    왜 게시판에 카카오맵을 직접 본문에 적으신 스크립트를 사용하시려고 하시는거죠?
    글 작성자가 저 스크립트를 이용할 수 있나요? (최고관리자 이외 스크립트 자체가 허용이 안될텐데요?)
    설령, 스크립트르 허용한다해도 사용자가 좌표를 직접 구해서 넣을 수 있나요? 해당 지점 좌표를 사용자가 알아서 저 스크립트를 넣을때 함께 넣어야 할 것 같은데요??

    글 작성시 특정 지점을 지도로 넣고 싶다면 에디트컴퍼넌트 를 사용해야 합니다.

    https://xetown.com/point_contents/1227531

    지금 본문 내용과 추가로 질문하시는 댓글 내용으로 보아 어떤 의도인지 파악이 어려울 정도네요.

  • profile profile
    저 컴퍼넌트가 xe에서 회원에게도 작동이 잘 되나요? 전 관리자만 되고 회원은 지도가 나타나지 않던데요.
  • profile profile
    네. 잘 작동합니다. 혹시 tpl 폴더에 .min.js 파일들이 있다면 삭제해 보세요. 오래된 파일이라 최신버전과 상관없는 파일입니다. 하지만 디버깅모드를 사용하는 최고관리자를 제외한 일반회원에게는 잘못된 오래된 파일이 로딩되어 문제가 될 수 있습니다.

    배포 시 min.js 파일도 최신으로 업데이트 해서 배포하여야 하는데 그렇지 않아 업데이트 하는 분들에게는 기존 파일이 영향을 줄 수 있습니다.
  • profile profile
    다운 받아 설치하고 컴퍼넌트 사용에 체크해도 에디터에 지도컴퍼넌트가 안 나오네요.
    이상하네..예전에는 분명히 나왔었는데. 뭔 일인지 모르겠네요.
  • profile profile
    뭔가 실수를 하셨겠죠. 설치경로 등..
  • profile profile
    ./modules/editor/components/map_components
    여기에 했는데 뭐가 잘못 되었는지 안나오네요. 원인을 한번 찾아봐야 겠습니다.
  • profile profile

    글 쓰기 시에 버튼이 안보이는 거라면 관리자 페이지 에디터 설정에서 권한 확인해보세요

  • profile profile
    해결하신 다음 하나 더 확인하실 게 있습니다.

    아... 그리고 XE 최신코어 버그가 하나 있습니다. 에디터컴퍼넌트 사용중 필터링 되어버려서 일반회원들이 작성시 문제가 되는 부분이 있습니다. 설문조사도 같은 문제가 발생하구요.

    https://github.com/xpressengine/xe-core/issues/2398

    위 이슈 읽어보시고 해당 되는 부분 주석하셔야 해요.
  • profile profile
    한참을 헤메다가 혹시나해서 브라우저 캐시 삭제하니 컴퍼넌트 버튼이 보이더군요. 헐...
    회원에게 작동안되는 것은 알려주신대로 저거 주석처리하니 일반회원에게도 잘 됩니다.
    내 사이트에는 설문 올리는 사람이 거의 없어 전혀 몰랐었는데 알려주셔서 정말 감사합니다.^^
    좋은 하루 보내세요.