카카오지도 API 연결 성공기

주말 내내까지는 아니고, 주말에 조금씩 시간내서 시안을 만들었던 부분에서 카카오지도를 연결해서 회사 위치를 넣어야하는 부분이 있었습니다. (내가 만든건데도..  참)

 

일단, 여러가지이면서 다양한 페이지들을 구현해보려고 구성을 했었습니다. 위치 찾기나 회사 위치 등에 페이지를 보면서 꼭 넣어봐야지 했었는데, 이번에 페이지에 추가하게 되었습니다. 생각보다 넣는 것까지는 어렵지는 않았습니다. 그래 넣는것까지... 그 뒤가;;

 

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
  <script>
    var container = document.getElementById('map');
    var options = {
    center: new kakao.maps.LatLng(33.450701, 126.570667),
    level: 3
    };

    var map = new kakao.maps.Map(container, options);
  </script>
  <div id="map" style="width:500px;height:400px;"></div>

정말, 위 코드만 넣고, 바로 지도가 되는 줄 알았습니다. 하지만..!! 로컬에서는 테스트가 되지 않아 굉장히 괴로워했다.. 그래서 API 관련 테스트는 웹서버에 업로드 후에 확인을 해야합니다.

 

위의 코드로 코드펜에 찍으면 그냥 이렇게만 나오기 때문입니다.. (CSS로 background: red 적용)

 

그래서 일단, 웹으로 업로드 후에 테스트해보니까 아주 잘나왔습니다. 

 

ftp로 업로드 한 후에 테스트를 해야합니다. 이제 그 이후의 마커를 찍고, info_window라는 옵션도 있고, 여러가지 다양한 커스텀들이 존재하기는 했지만, 일단 카카오 지도를 붙여넣는 것에만 성공하는 것에 만족을 했습니다. 생각보다 CSS로 커스텀을 하기 위해서는 조금 다양하게 찾아야하는 부분도 있었습니다.

 

그래서, 조금은 과하지도 않은 부분으로 간단하게 info_window같은 느낌이지만, 절대값을 통해서 움직여도 그자리에 그대로 있는 box를 하나 생성했습니다.

 

? 하시는 분도 계시겠지만, 현재 마커는 찍지 않아서 이게 뭐야 할텐데;; 일단 저 green 계열의 박스는 지도를 움직여도 그자리에 있어서 장소의 정보를 계속해서 강조하면서 띄워주는 방식의 컨셉으로 만들었습니다.

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
  <script>
    var container = document.getElementById('map');
    var options = {
    center: new kakao.maps.LatLng(33.450701, 126.570667),
    level: 3
    };

    var map = new kakao.maps.Map(container, options);
  </script>
  <div id="map" style="width:500px;height:400px;">
  	<!-- 이게 그린계열의 박스-->
    <div class="box"></div>
  </div>

#map {
	position: relative;
    z-index: 400
}

#map .box {
	width: 420px;
    height: 300px;
    background: #a0c735;
    position: absolute;
    top: 100px;
    left: 70px;
    z-index: 500;
}

 

Z-index 값을 주면서  box를 조금 높게 주니까, 위로 .box가 뜨면서 팝업 메뉴처럼 그린 계열의 box가 계속 떠있었습니다. 제 경우에는 회사 위치가 1개만 표시하는 내용이다보니 이렇게 box를 이용해서 작업을 할 수 있는 부분이지만, 여러개라고 한다면, 다른 방법으로 작성을 해야할 것으로 보입니다. 

 

참고한 내용 : https://pr.kia.com/ko/company/tour/global-plant/sohari-plant.do

웹서버에 올리기 전에 먼저 박스를 커스터마이징하는 방법도 있어서 굉장히 편리했습니다. 이 내용으로 회사 주소, 전화번호, 오시는 길 등에 대한 내용을 기재한다면 조금 더 손쉽게 만들 수 있어서 위 방법으로 제작을 하였습니다.

 

생각보다 어려웠고, API를 연결하는 순간, 동적으로 생기는 Div의 향연이 굉장히 혼란스러웠습니다. 그래도 #map 크기 등을 컨트롤 할 수 있었고, 나머지는 팝업을 띄우던지, 마커를 연결하는지 등의 옵션이 있기 때문에 이런 부분도 조금 커스텀하는데 도움이 될 수 있을 것이라 생각되고, 이번주 한주도 열심히 카카오지도를 살펴봐야 할 것 같습니다.