맛슐랭 - 카카오 지도 API 사용하기

저번 간편 로그인 때 발급받은 자바스크립트 키로 카카오 지도 api를 사용할 수 있다.

( 지도 사용법 : https://apis.map.kakao.com/web/guide/ )

 

html 문서에 id가 map인 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(37.566826, 126.9786567), // 지도의 중심좌표
           level: 3 // 지도의 확대 레벨
       };

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

 

나는 부트 스트랩을 활용하여 메인 페이지를 조금 더 꾸며주었다.

 

[메인페이지]