반응형
1. 카카오 개발자 사이트로 이동하여 등록 및 로그인 한다. https://developers.kakao.com/
2. 플랫폼과 사이트 도메인을 등록한다.
3. 내 애플리케이션 > 앱 설정 > 요약 정보로 이동하여 앱키를 복사한다.
테스트 용이라면 admin을 아니라면 상태에 맞는 키를 복사한다.
4. https://apis.map.kakao.com/로 이동한다. 나의 개발 형태와 맞는 사항을 찾는다.
5. https://apis.map.kakao.com/web/sample/로 이동하여 내가 필요한 형태를 확인한다.
6. 샘플들을 조합하면서 웹페이지로 구현한다.
아래는 화면에 지도 열어서 마커넣고, 마커에 레이블 추가한 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:650px;height:450px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=인증키를 넣으세요"></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(좌표를 찍으세요),
level: 3
};
var map = new kakao.maps.Map(container, options);
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(좌표를 찍으세요);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
var iwContent =
'<div style="padding:5px;"><h2>뭐라 뭐라 쓰세요~</h5></div>',
// 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwPosition = new kakao.maps.LatLng(좌표를 찍으세요),
//인포윈도우 표시 위치입니다
iwRemoveable = false;
// removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성하고 지도에 표시합니다
var infowindow = new kakao.maps.InfoWindow({
map: map, // 인포윈도우가 표시될 지도
position : iwPosition,
content : iwContent,
removable : iwRemoveable
});
// 아래 코드는 인포윈도우를 지도에서 제거합니다
// infowindow.close();
</script>
</body>
</html>
비개발자도 쉽게 할 수 있답니다.
(개발자가 혹시 이런것 가지고 안되네 되네 하면요. 혼내주세요.)
반응형
'& Develop' 카테고리의 다른 글
| 반복적인 코드 자동화 - codebone으로 손쉽게... (0) | 2017.01.26 |
|---|---|
| UI/UX platform 도구 목록 (0) | 2017.01.23 |
댓글