(2) 카카오 지도 API - 단일 마커 표시하기

저번 카카오 지도 만들기에 이어서 본 포스팅에서는 카카오 지도 API를 이용한 단일 마커 표시하기를 진행해보겠습니다. 예전에 작성했었던 구글 지도 API와 비교해서 보시면 원리를 이해하는데 더 도움이 되실것 같습니다. 아래는 실행 결과와 스크립트 입니다.

<!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(37.5546788, 126.9706069), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

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

// 마커가 표시될 위치입니다 
var markerPosition  = new kakao.maps.LatLng(37.5546788, 126.9706069); 

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    position: markerPosition
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);    
</script>
</body>
</html>

구문을 살펴보면 간단합니다. 맵을 객체를 담을 mapContainer와 초기화 지도 중심점과 확대 레벨을 담을 mapoption이 선언되고 아래의 map 변수에 두 가지 조건을 가진 카카오 지도를 생성합니다. (kakao.maps.map)

이후 카카오 지도 마커가 표시될 위치를 markePosition에 설정하고 마커를 설정하여 해당 위치에 표기합니다. (kakao.maps.Marker)

다음은 마커를 지도 위에 표시하도록 marker.setMap(map)을 설정해 주는데요. 카카오 지도 API는 별도의 마커 표시 스크립트가 필요하지 않았습니다. 주석에는 marker.setMap(null) 을 이용하면 마커를 제거할 수 있다고 하는데 해당 스크립트는 향후 마커에 정보창을 표시하거나 카테고리별 검색결과를 표시하고 싶을 때 유용하게 사용되니까 잘 기억해 두시길 바랍니다.

다음 포스팅에서는 다중 마커를 표현하는 방법을 알아보겠습니다.

2022.12.17 - [정보기술] - (3) 카카오 지도 API - 다중 마커 표시하기

(3) 카카오 지도 API - 다중 마커 표시하기

2022.12.17 - [정보기술] - (1) 카카오 지도 API - 지도 만들기 2022.12.17 - [정보기술] - (2) 카카오 지도 API - 단일 마커 표시하기 2022.12.17 - [정보기술] - (3) 카카오 지도 API - 다중 마커 표시하기 2022.12.17 - [

iftraveler.tistory.com

'정보기술' 카테고리의 다른 글

(4) 카카오 지도 API - 정보창 표시하기 (0)	2022.12.17
(3) 카카오 지도 API - 다중 마커 표시하기 (0)	2022.12.17
(1) 카카오 지도 API - 지도 만들기 (0)	2022.12.17
카카오 지도 API 활용하기 - 에어비엔비 스타일 사이트 만들기 (1)	2022.12.17
(12) 구글 지도 API - 위치기반 서비스 제공 (끝) (1)	2022.12.14

당신과 나의 어바웃 라이프

(2) 카카오 지도 API - 단일 마커 표시하기

'정보기술' 카테고리의 다른 글

댓글

티스토리툴바

(2) 카카오 지도 API - 단일 마커 표시하기

'정보기술' 카테고리의 다른 글

관련글

댓글

티스토리툴바