728x90
완성된 화면
- 원하는 위치에 마커 생성
- 원하는 장소의 로고 삽입
- 원하는 장소의 홈페이지 연결
- 원하는 장소의 정보 위치, 장소 한 줄 소개 기능 구현
구현 방법
2) 애플리케이션 추가하기
3) 나의 앱 키(JavaScript 키) 메모해 두기(빨간 부분)
4) vs코드 키고 카카오 api가이드 보기
5) (맘 편하게) 마커 생성하기 소스 코드 활용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>마커 생성하기</title>
</head>
<body>
<div id="map" 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 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
</script>
</body>
</html>6) 위 코드에서
발급받은 APP KEY를 사용하세요여기 부분에 자신의 메모해 놓은 자바스크립트 키를 넣는다(아까 빨간 부분)
7) 자신이 원하는 지역의 지도 중심좌표가 필요한데(중요 / 여기서 시간 많이 까먹음)
이 화면에서 확인이 가능하다
여기에서 자신이 원하는 장소를 클릭해서 위도와 경도를 확인한다
8) 그리고 아까 그 샘플 코드에 넣으면 완성!!
9) 하지만, 여기서 끝나지 않음 / 카카오 개발자 사이트에서 사이트 도메인을 cafe24.com으로 해야 한다
토이 프로젝트 진행하면서 하도 localhost:8080으로 진행을 많이 했어서 똑같이 했다가
콘솔에서 계속 아래의 에러 코드가 떴다
Uncaught ReferenceError: kakao is not defined
10) 그래서 개발자 사이트에서 사이트 도메인을 수정하고 새로고침을 하니까 해결이 되었다
소감
처음 구현할 때는 예제코드가 지금처럼 카카오맵 가이드가 친절하지 않았던 것인지(아님 내가 못 찾은 걸 수도)
2-3일 정도 걸려서 해결했던 구현이었는데, 오늘은 회사에서 1시간? 정도만에 구현했다(뿌듯)
중간에 스스로 에러도 해결해서 아주 기분이 좋았다
'프로그래밍 > 프로젝트' 카테고리의 다른 글
| 2달간 거의 밤샌 홈페이지 개발 후기 (4) | 2023.12.15 |
|---|---|
| html, css 표 만들기 사이트 추천(완전 편리 그 자체) (0) | 2023.12.12 |
| 윅스(wix) 클론코딩 프로젝트 후기 (0) | 2023.12.08 |
| GA4 스터디 후기 - 나와 닮은 유기견 사이트(나만 없어 강아지) 기획 (0) | 2023.12.07 |
| 카페24 스마트디자인 - 쇼핑몰 페이지 추가하기 (2) | 2023.12.06 |
댓글