[coding-diary] kakao map API 적용하기.

naver map api 기간이 종료되면서 kakao map api로 바꾸게 되었다.


기존에 작업 되어있는 소스들이 있어서 조금만 수정했다.


기본 가이드는 공식 페이지에서 확인해서 그대로 따라하면 된다.
테스트를 할때는 카카오맵 계정에 플랫폼 지정이 되어있어야 한다.
나는 웹이고, 내가 확인해야 하는 페이지는 테스트 서버이기 때문에 실서버, 테스트 서버 url을 모두 등록하였다.


원하는 곳의 지도를 center로 잡아야 하는데 그렇게 하기 위해서는 위경도 좌표가 필요하다.
구글맵을 이용한다. 아래 블로그 참고하였다.


이렇게


페이지 상에 카카오맵이 여러 개 들어가야 해서 적용한 소스.



탭버튼 클릭시 지도가 노출되는 형태로 되어있는데,
탭버튼 클릭해서 지도 영역이 display none에서 block으로 될 때 지도를 감싸는 영역의 사이즈가 바뀌는 것이기 때문에 지도를 다시 호출해주어야 한다.
window resize에는 자동으로 반응한다.


기타 다른 옵션 추가를 원한다면 아래 경로에서 확인할 수 있다.

http://apis.map.kakao.com/web/sample/

댓글

☆ 잉기 ★

유튜브 iframe 스크립트로 삽입하기

[Swiper] 특정 슬라이드로 이동하기