Marker Methods Events

Constructor

kakao.maps.Marker(options)

주어진 객체로 마커를 생성한다.
지도 뿐만 아니라 로드뷰 위에도 올릴 수 있다.
마커 생성하기 샘플보기
로드뷰에 마커와 인포윈도우 올리기 샘플보기
마커의 고도와 반경 조절하기 샘플보기

var marker = new kakao.maps.Marker({
    map: map,
    position: new kakao.maps.LatLng(33.450701, 126.570667)
});

Parameters

• options Object
  • map Map | Roadview : 마커가 올라갈 지도 또는 로드뷰
  • position LatLng | Viewpoint : 마커의 좌표 또는 로드뷰에서의 시점
  • image MarkerImage : 마커의 이미지
  • title String : 마커 엘리먼트의 타이틀 속성 값 (툴팁)
  • draggable Boolean : 드래그 가능한 마커, 로드뷰에 올릴 경우에는 유효하지 않다
  • clickable Boolean : 클릭 가능한 마커
  • zIndex Number : 마커 엘리먼트의 z-index 속성 값
  • opacity Number : 마커 투명도 (0-1)
  • altitude Number : 로드뷰에 올라있는 마커의 높이 값(m 단위)
  • range Number : 로드뷰 상에서 마커의 가시반경(m 단위), 두 지점 사이의 거리가 지정한 값보다 멀어지면 마커는 로드뷰에서 보이지 않게 된다

Methods

setMap(map_or_roadview)

지도 또는 로드뷰에 마커를 올린다.
null 을 지정하면 마커를 제거한다.
마커 생성하기 샘플보기
여러개 마커 제어하기 샘플보기

marker.setMap(map); // 지도에 올린다.
marker.setMap(null); // 지도에서 제거한다.

marker.setMap(roadview); // 로드뷰에 올린다.

Parameters

• map_or_roadview Map | Roadview

getMap()

마커가 올라가있는 지도를 반환한다.

marker.getMap();

Returns

• Map

setImage(image)

마커에 새 MarkerImage를 지정한다.
다른 이미지로 마커 생성하기 샘플보기

var markerImage = new kakao.maps.MarkerImage(
    'https://i1.daumcdn.net/dmaps/apis/nlocalblit04.png',
    new kakao.maps.Size(31, 35), new kakao.maps.Point(13, 34));
marker.setImage(markerImage);

Parameters

• image MarkerImage

getImage()

마커의 MarkerImage를 반환한다.

marker.getImage(); // 지정했던 MarkerImage의 인스턴스를 리턴한다.

Returns

• MarkerImage

setPosition(position)

마커의 좌표를 지정한다.
로드뷰의 특정 시점에 고정하기 위해서 Viewpoint 객체를 사용할 수도 있다.
panoId를 지정한 Viewpoint 를 사용하면 panoId에 해당하는 로드뷰 위치에서만 보이게 된다.

 
// 지도 혹은 로드뷰에서 마커의 위치를 지정
marker.setPosition(new kakao.maps.LatLng(33.450701, 126.570667));

// 로드뷰에서 특정 시점에 고정된 마커의 위치를 지정
marker.setPosition(new kakao.maps.Viewpoint(30, -10));

// 로드뷰에서 특정 시점 및 특정 panoId에서만 보이도록 고정된 마커의 위치를 지정
marker.setPosition(new kakao.maps.Viewpoint(30, -10, 0, 1033283653));

Parameters

• position LatLng | Viewpoint

getPosition()

마커의 좌표를 반환한다.

marker.getPosition();

Returns

• LatLng

setZIndex(zIndex)

마커의 z-index를 설정한다.

marker.setZIndex(3);

Parameters

• zIndex Number

getZIndex()

마커의 z-index를 반환한다.

var marker = new kakao.maps.Marker({
    zIndex: 4
});
marker.getZIndex(); // 4

Returns

• Number

setVisible(visible)

마커의 표시 여부를 지정한다.

marker.setVisible(false); // 마커를 숨긴다.

Parameters

• visible Boolean

getVisible()

마커의 표시 여부를 반환한다.

marker.setVisible(true);
marker.getVisible(); // true

Returns

• Boolean

setTitle(title)

마커의 툴팁을 설정한다.

marker.setTitle('타이틀');

Parameters

• title String

getTitle()

마커의 툴팁을 반환한다.

var marker = new kakao.maps.Marker({
    title: "마커 타이틀을 획득하셨습니다."
});
marker.getTitle(); // "마커 타이틀을 획득하셨습니다."

Returns

• String

setDraggable(draggable)

드래그 가능 여부를 지정한다.
로드뷰에 올라가 있을 경우에는 마커의 드래그 기능을 비활성화 되기 때문에
지도에 올라가 있을 경우에만 의미가 있다.

marker.setDraggable(true); // 드래그 가능하도록 설정

Parameters

• draggable Boolean

getDraggable()

드래그 가능 여부를 반환한다.

marker.getDraggable();

Returns

• Boolean

setClickable(clickable)

클릭 가능 여부를 지정한다.
true 로 지정하게 되면 마커를 클릭 했을 때, 지도의 클릭 이벤트가 발생하지 않도록 막아준다.

marker.setClickable(true);

Parameters

• clickable Boolean

getClickable()

클릭 가능 여부를 반환한다.

marker.getClickable();

Returns

• Boolean

setAltitude(altitude)

로드뷰상에서 마커의 높이(위치)를 지정한다.
단위는 m(미터)이며 현재 로드뷰의 바닥 높이를 기준으로 떨어져있는 높이를 말한다.

marker.setAltitude(10);

Parameters

• altitude Number

현재 보고있는 시점이 지면으로부터 약 1.7m 떨어져 있다고 가정하고 지면의 높이값을 0으로 계산한다. 때문에 높이값이 정확하지 않을 수 있다.
또한 로드뷰를 찍은 위치의 정보(해발 고도, 기울어짐)는 고려하지 않기 때문에 마커가 찍힌 위치가 어색하거나 부정확할 수 있다.
보통은 2층 이상에 존재하는 장소를 로드뷰에 대략적으로 표시하기 위해서 사용한다.

getAltitude()

마커의 높이(위치)를 반환한다.
단위는 m(미터).

var marker = new kakao.maps.Marker({
	altitude: 10
});
marker.getAltitude(); // 10

Returns

• Number

setRange(range)

마커의 가시반경을 설정한다.
로드뷰의 위치와 마커의 위치 사이의 거리가 가시반경 이내일 경우에만 로드뷰상에 노출된다.
단위는 m(미터)이며 기본값은 500m이다.

marker.setRange(300);

Parameters

• range Number

getRange()

마커의 가시반경을 반환한다.
단위는 m(미터).

var marker = new kakao.maps.Marker({
    range: 300
});
marker.getRange(); // 300

Returns

• Number

setOpacity(opacity)

마커의 투명도를 설정한다.

marker.setOpacity(0.5);

Parameters

• opacity Number

getOpacity()

마커의 투명도를 반환한다.

var marker = new kakao.maps.Marker({
    opacity: 0.5
});
marker.getOpacity(); // 0.5

Returns

• Number

Events

click

마커를 클릭하면 발생한다.
마커에 클릭 이벤트 등록하기 샘플보기

kakao.maps.event.addListener(marker, 'click', function() {
    alert('marker click!');
});

mouseover

마커에 마우스 커서를 올리면 발생한다.
마커에 마우스 이벤트 등록하기 샘플보기

kakao.maps.event.addListener(marker, 'mouseover', function() {
    alert('marker mouseover!');
});

mouseout

마우스 커서가 마커에서 벗어나면 발생한다.
마커에 마우스 이벤트 등록하기 샘플보기

kakao.maps.event.addListener(marker, 'mouseout', function() {
    alert('marker mouseout!');
});

rightclick

마커를 오른쪽 버튼으로 클릭하면 발생한다.

kakao.maps.event.addListener(marker, 'rightclick', function() {
    alert('marker rightclick!');
});

dragstart

드래그를 시작하면 발생한다.
draggable 마커 이벤트 적용하기 샘플보기

kakao.maps.event.addListener(marker, 'dragstart', function() {
    alert('marker dragstart!');
});

dragend

드래그를 종료하면 발생한다.
draggable 마커 이벤트 적용하기 샘플보기

kakao.maps.event.addListener(marker, 'dragend', function() {
    alert('marker dragend!');
});

MarkerImage

기본 마커가 아닌, 별도의 이미지를 이용하여 마커를 만들기 위한 이미지 생성 객체
다른 이미지로 마커 생성하기 샘플보기
다양한 이미지 마커 표시하기 샘플보기

Constructor

kakao.maps.MarkerImage(src, size[, options])

마커에 사용할 이미지를 생성한다.
세 번째 파라메터로 offset을 사용할 경우 네 번째 파라메터로 shape, 다섯 번째 파라메터로 coords를 넣을 수 있다.

// 세 번째 파라메터로 options를 사용.
var icon = new kakao.maps.MarkerImage(
    'https://localimg.daum-img.net/localimages/07/2009/map/icon/blog_icon01_on.png',
    new kakao.maps.Size(31, 35),
    {
        offset: new kakao.maps.Point(16, 34),
        alt: "마커 이미지 예제",
        shape: "poly",
        coords: "1,20,1,9,5,2,10,0,21,0,27,3,30,9,30,20,17,33,14,33"
    }
);
/*
아래와 같이 세번째 파라메터부터 순서대로 offset, shape, coords 값을 넣어주는 방식으로도 사용 가능하다.
var icon = new kakao.maps.MarkerImage(
    'https://localimg.daum-img.net/localimages/07/2009/map/icon/blog_icon01_on.png',
    new kakao.maps.Size(31, 35),
    new kakao.maps.Point(16, 34),
    "poly",
    "1,20,1,9,5,2,10,0,21,0,27,3,30,9,30,20,17,33,14,33"
);
*/

new kakao.maps.Marker({
    position: new kakao.maps.LatLng(33.450701, 126.570667),
    image: icon
}).setMap(map);
 

Parameters

• src String : 이미지 주소
• size Size : 마커의 크기
• options Obejct
  • alt String : 마커 이미지의 alt 속성값을 정의한다.
  • coords String : 마커의 클릭 또는 마우스오버 가능한 영역을 표현하는 좌표값
  • offset Point : 마커의 좌표에 일치시킬 이미지 안의 좌표 (기본값: 이미지의 가운데 아래)
  • shape String : 마커의 클릭 또는 마우스오버 가능한 영역의 모양
  • spriteOrigin Point : 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
  • spriteSize Size : 스프라이트 이미지의 전체 크기

옵션으로 지정한 shape와 coords의 값은 각각 실제 HTML에서 <area>의 shape와 coords 속성에 대응한다. 예를 들어 설명하자면 아래와 같다.

아래의 이미지로 MarkerImage를 만들어 보자.

이미지의 크기는 31×35이다. 추가 옵션없이 생성해보자.

var icon = new kakao.maps.MarkerImage(
        'https://i1.daumcdn.net/dmaps/apis/n_local_blit_04.png',
        new kakao.maps.Size(31, 35));

이렇게 만들어진 MarkerImage의 HTML 마크업을 단순화하면 다음과 같다.

// Result
<img width="31" height="35" src="https://i1.daumcdn.net/dmaps/apis/n_local_blit_04.png" alt="">

이 MarkerImage로 생성한 Marker에 클릭 이벤트를 등록하면 이미지 크기에 해당하는 영역 전체에서 클릭 이벤트가 발생한다.

다음과 같은 특정 영역에서만 클릭 이벤트가 발생하도록 해 보자.

옵션으로 shape와 coords값을 주어 MarkerImage를 만든다.

var icon = new kakao.maps.MarkerImage(
        'https://i1.daumcdn.net/dmaps/apis/n_local_blit_04.png',
        new kakao.maps.Size(31, 35),
        {
            shape: 'poly',
            coords: '16,0,20,2,24,6,26,10,26,16,23,22,17,25,14,35,13,35,9,25,6,24,2,20,0,16,0,10,2,6,6,2,10,0'        
        });

위의 코드로 만들어진 HTML 마크업의 대략적인 구조는 다음과 같다.

// Result
<img width="31" height="35" src="https://i1.daumcdn.net/dmaps/apis/n_local_blit_04.png" alt="" usemap="#Marker">
<map name="Marker">
    <area alt="" shape="poly" coords="16,0,20,2,24,6,26,10,26,16,23,22,17,25,14,35,13,35,9,25,6,24,2,20,0,16,0,10,2,6,6,2,10,0">
</map>

위와 같이 생성된 Marker는 아래 그림에서 보이는 푸른색 영역에서만 클릭 이벤트가 발생한다.

자세한 내용은 Image Maps 관련 W3C 문서 를 참조한다.

InfoWindow Methods

인포윈도우 객체

Constructor

kakao.maps.InfoWindow(options)

주어진 객체로 인포윈도우를 생성한다.
지도 뿐만 아니라 로드뷰 위에도 올릴 수 있다.
인포윈도우 생성하기 샘플보기
로드뷰에 마커와 인포윈도우 올리기 샘플보기
마커의 고도와 반경 조절하기 샘플보기

var infowindow = new kakao.maps.InfoWindow({
    map: map,
    position: new kakao.maps.LatLng(33.450701, 126.570667),
    content: 'I am InfoWindow'
});
  

Parameters

• options Object
  • content Node | String : 엘리먼트 또는 HTML 문자열 형태의 내용
  • disableAutoPan Boolean : 인포윈도우를 열 때 지도가 자동으로 패닝하지 않을지의 여부 (기본값: false)
  • map Map | Roadview : 인포윈도우가 올라갈 지도 또는 로드뷰
  • position LatLng : 인포윈도우의 좌표
  • removable Boolean : 삭제 가능한 인포윈도우
  • zIndex Number : 인포윈도우 엘리먼트의 z-index 속성 값
  • altitude Number : 로드뷰에 올라있는 인포윈도우의 높이 값(m 단위)
  • range Number : 로드뷰 상에서 인포윈도우의 가시반경(m 단위), 두 지점 사이의 거리가 지정한 값보다 멀어지면 인포윈도우는 보이지 않게 된다

Methods

open(map_or_roadview [, marker])

지도에 인포윈도우를 올린다.
marker가 주어지면, 해당 마커에서 열린 효과를 낸다.
로드뷰에서도 같은 동작을 한다.
마커에 인포윈도우 표시하기 샘플보기

var map = new kakao.maps.Map(container, options);
var marker = new kakao.maps.Marker(options);

var infowindow = new kakao.maps.InfoWindow({
    position: new kakao.maps.LatLng(33.450701, 126.570667),
    content: 'open me plz.'
});

infowindow.open(map, marker);

Parameters

• map_or_roadview Map | Roadview
• marker Marker

close()

인포윈도우를 제거한다.

infowindow.close();

getMap()

인포윈도우가 올라가있는 지도를 반환한다.

infowindow.getMap();

Returns

• Map

setPosition(position)

인포윈도우의 좌표를 지정한다.
로드뷰의 특정 시점에 고정하기 위해서 Viewpoint 객체를 사용할 수도 있다.
panoId를 지정한 Viewpoint 를 사용하면 panoId에 해당하는 로드뷰 위치에서만 보이게 된다.

var position = new kakao.maps.LatLng(33.450701, 126.570667);
infowindow.setPosition(position);

Parameters

• position LatLng | Viewpoint

getPosition()

인포윈도우의 좌표를 반환한다.

infowindow.getPosition();

Returns

• LatLng

setContent(content)

인포윈도우의 내용을 지정한다.
엘리먼트 또는 HTML 문자열을 지정할 수 있다.

infowindow.setContent('This is all for you');

Parameters

• content Node | String

getContent()

인포윈도우의 내용을 지정했던 형태로 반환한다.

infowindow.getContent(); // "This is all for you"

Returns

• Node | String

setZIndex(zIndex)

인포윈도우의 z-index를 설정한다.

infoWindow.setZIndex(3);

Parameters

• zIndex Number

getZIndex()

인포윈도우의 z-index를 반환한다.

var infoWindow = new kakao.maps.InfoWindow({
    zIndex: 4
});
infoWindow.getZIndex(); // 4

Returns

• Number

setAltitude(altitude)

로드뷰상에서 인포윈도우의 높이(위치)를 지정한다.
단위는 m(미터)이며 현재 로드뷰의 바닥 높이를 기준으로 떨어져있는 높이를 말한다.

infoWindow.setAltitude(10);

Parameters

• altitude Number

현재 보고있는 시점이 지면으로부터 약 1.7m 떨어져 있다고 가정하고 지면의 높이값을 0으로 계산한다. 때문에 높이값이 정확하지 않을 수 있다.
또한 로드뷰를 찍은 위치의 정보(해발 고도, 기울어짐)는 고려하지 않기 때문에 인포윈도우가 찍힌 위치가 어색하거나 부정확할 수 있다.
보통은 로드뷰에 보이는 2층 이상의 장소정보를 대략적으로 표시하기 위해서 사용한다.

getAltitude()

인포윈도우의 높이(위치)를 반환한다.
단위는 m(미터).

var infoWindow = new kakao.maps.InfoWindow({
	altitude: 10
});
infoWindow.getAltitude(); // 10

Returns

• Number

setRange(range)

인포윈도우의 가시반경을 설정한다.
로드뷰의 위치와 인포윈도우의 위치 사이의 거리가 가시반경 이내일 경우에만 로드뷰상에 노출된다.
단위는 m(미터)이며 기본값은 500m이다.

infoWindow.setRange(300);

Parameters

• range Number

getRange()

인포윈도우의 가시반경을 반환한다.
단위는 m(미터).

var infoWindow = new kakao.maps.InfoWindow({
    range: 300
});
infoWindow.getRange(); // 300

Returns

• Number

CustomOverlay Methods

커스텀한 엘리먼트를 담아 지도위에 올릴 수 있는 오버레이 객체.
Infowindow 보다는 담을 수 있는 컨텐츠가 자유롭고 AbstractOverlay 보다 사용하기 쉽다는 장점이 있다.

Constructor

kakao.maps.CustomOverlay(options)

주어진 객체로 커스텀 오버레이를 생성한다.
지도 뿐만 아니라 로드뷰 위에도 올릴 수 있다.
커스텀 오버레이 생성하기1 샘플보기
커스텀 오버레이 생성하기2 샘플보기
로드뷰에 커스텀 오버레이 올리기 샘플보기
로드뷰에 이미지 올리기 샘플보기
커스텀오버레이를 드래그 하기 샘플보기

var customOverlay = new kakao.maps.CustomOverlay({
    map: map,
    clickable: true,
    content: '<div class="customOverlay"><a href="#">Chart</a></div>',
    position: new kakao.maps.LatLng(33.450701, 126.570667),
    xAnchor: 0.5,
    yAnchor: 1,
    zIndex: 3
});

Parameters

• options Object
  • clickable Boolean : true 로 설정하면 컨텐츠 영역을 클릭했을 경우 지도 이벤트를 막아준다.
  • content Node | String : 엘리먼트 또는 HTML 문자열 형태의 내용
  • map Map | Roadview : 커스텀 오버레이가 올라갈 지도 또는 로드뷰
  • position LatLng | Viewpoint : 커스텀 오버레이의 좌표 또는 로드뷰에서의 시점
  • xAnchor Number : 컨텐츠의 x축 위치. 0_1 사이의 값을 가진다. 기본값은 0.5
  • yAnchor Number : 컨텐츠의 y축 위치. 0_1 사이의 값을 가진다. 기본값은 0.5
  • zIndex Number : 커스텀 오버레이의 z-index

Methods

setMap(map_or_roadview)

지도 또는 로드뷰에 커스텀 오버레이를 올린다.
null 을 지정하면 오버레이를 제거한다.

customOverlay.setMap(map); // 지도에 올린다.
customOverlay.setMap(null); // 지도에서 제거한다.

customOverlay.setMap(roadview); // 로드뷰에 올린다.

Parameters

• map_or_roadview Map | Roadview

getMap()

커스텀 오버레이가 올라가있는 지도를 반환한다.

customOverlay.getMap();

Returns

• Map

setPosition(position)

커스텀 오버레이의 좌표를 지정한다.
로드뷰의 특정 시점에 고정하기 위해서 Viewpoint 객체를 사용할 수도 있다.
panoId를 지정한 Viewpoint 를 사용하면 panoId에 해당하는 로드뷰 위치에서만 보이게 된다.

Parameters

• position LatLng | Viewpoint

getPosition()

커스텀 오버레이의 좌표를 반환한다.

Returns

• LatLng

setContent(content)

커스텀 오버레이의 내용을 지정한다.
엘리먼트 또는 HTML 문자열을 지정할 수 있다.

Parameters

• content Node | String

getContent()

커스텀 오버레이의 내용을 지정했던 형태로 반환한다.

Returns

• Node | String

setVisible(visible)

커스텀 오버레이의 표시 여부를 지정한다.

Parameters

• visible Boolean

getVisible()

커스텀 오버레이의 표시 여부를 반환한다.

Returns

• Boolean

setZIndex(zIndex)

커스텀 오버레이의 z-index를 설정한다.

Parameters

• zIndex Number

getZIndex()

커스텀 오버레이의 z-index를 반환한다.

Returns

• Number

setAltitude(altitude)

로드뷰상에서 커스텀 오버레이의 높이(위치)를 지정한다.
단위는 m(미터)이며 현재 로드뷰의 바닥 높이를 기준으로 떨어져있는 높이를 말한다.

customOverlay.setAltitude(10);

Parameters

• altitude Number

현재 보고있는 시점이 지면으로부터 약 1.7m 떨어져 있다고 가정하고 지면의 높이값을 0으로 계산한다. 때문에 높이값이 정확하지 않을 수 있다.
또한 로드뷰를 찍은 위치의 정보(해발 고도, 기울어짐)는 고려하지 않기 때문에 커스텀 오버레이가 찍힌 위치가 어색하거나 부정확할 수 있다.
보통은 2층 이상에 존재하는 장소를 로드뷰에 대략적으로 표시하기 위해서 사용한다.

getAltitude()

커스텀 오버레이의 높이(위치)를 반환한다.
단위는 m(미터).

var customOverlay = new kakao.maps.CustomOverlay({
	altitude: 10
});
customOverlay.getAltitude(); // 10

Returns

• Number

setRange(range)

커스텀 오버레이의 가시반경을 설정한다.
로드뷰의 위치와 커스텀 오버레이의 위치 사이의 거리가 가시반경 이내일 경우에만 로드뷰상에 노출된다.
단위는 m(미터)이며 기본값은 500m이다.

customOverlay.setRange(300);

Parameters

• range Number

getRange()

커스텀 오버레이의 가시반경을 반환한다.
단위는 m(미터).

var customOverlay = new kakao.maps.CustomOverlay({
    range: 300
});
customOverlay.getRange(); // 300

Returns

• Number

AbstractOverlay Methods

Constructor

kakao.maps.AbstractOverlay()

API 사용자가 직접 정의할 수 있는 오버레이.
AbstractOverlay를 상속 받아 사용할 객체를 생성하고 prototype을 연결해 준다.
온전히 동작하는 오버레이를 만들고자 한다면 3가지 인터페이스 메소드( onAdd, draw, onRemove )를 구현해야 한다.
지도 영역 밖의 마커위치 추적하기 샘플보기

// 간단한 텍스트를 지도에 올리는 예제

// 생성자에서 엘리먼트를 생성한다.
function SimpleTextMarker(position, text) {
    this.position = position;
    this.node = document.createElement('div');
    this.node.style.position = 'absolute';
    this.node.style.whiteSpace = 'nowrap';
    this.node.appendChild(document.createTextNode(text));
}

// "AbstractOverlay":#AbstractOverlay 상속. 프로토타입 체인을 연결한다..
SimpleTextMarker.prototype = new kakao.maps.AbstractOverlay;

// 필수 구현 메소드.
// AbstractOverlay의 getPanels() 메소드로 MapPanel 객체를 가져오고
// 거기에서 오버레이 레이어를 얻어 생성자에서 만든 엘리먼트를 자식 노드로 넣어준다.
SimpleTextMarker.prototype.onAdd = function() {
    var panel = this.getPanels().overlayLayer;
    panel.appendChild(this.node);
};

// 필수 구현 메소드.
// 생성자에서 만든 엘리먼트를 오버레이 레이어에서 제거한다.
SimpleTextMarker.prototype.onRemove = function() {
    this.node.parentNode.removeChild(this.node);
};

// 필수 구현 메소드.
// 지도의 속성 값들이 변화할 때마다 호출된다. (zoom, center, mapType)
// 엘리먼트의 위치를 재조정 해 주어야 한다.
SimpleTextMarker.prototype.draw = function() {
    var projection = this.getProjection();
    var point = projection.pointFromCoords(this.position);
    var width = this.node.offsetWidth;
    var height = this.node.offsetHeight;

    this.node.style.left = (point.x - width/2) + "px";
    this.node.style.top = (point.y - height/2) + "px";

};

var marker = new SimpleTextMarker(map.getCenter(), 'You just activated my trap card!');
marker.setMap(map);

Methods

draw()

위치를 재조정할 필요가 있을 때 호출된다.
이 함수 내에서 엘리먼트의 위치를 잡아주어야 한다.

onAdd()

지도에 올릴 때 호출된다.
setMap(map) 을 실행하면 이 함수가 실행된다.
이 함수 내에서 생성된 DOM 객체를 MapPanels에 자식 노드로 넣어주도록 한다.

onRemove()

지도에서 제거할 때 호출된다.
setMap(null) 을 실행하면 이 함수가 실행된다.
이 함수 내에서 MapPanels에 자식 노드로 넣어준 엘리먼트를 제거하도록 한다.

setMap(map)

지도에 사용자 오버레이를 올린다.
null 을 지정하면 오버레이를 제거한다.

Parameters

• map : Map

getMap()

사용자 오버레이가 올라가있는 지도를 반환한다.

Returns

• Map

getPanels()

붙어있는 지도의 패널을 반환한다.

Returns

• MapPanels

getProjection()

붙어있는 지도의 좌표 변환 객체를 반환한다.

Returns

• MapProjection

MapPanels

지도의 패널을 담당하는 객체.

Properties

overlayLayer

오버레이를 올릴 수 있는 HTML 엘리먼트

MapProjection Methods

지도와 화면 사이의 좌표 변환을 담당한다.
지도 또는 지도에 올라온 오버레이 객체가 가진 getProjection() 메소드로 얻을 수 있다.
별도의 생성자는 제공하지 않는다.

Methods

pointFromCoords(latlng)

지도 좌표에 해당하는 위치 좌표(pixel)를 반환한다.
해당 위치 좌표는 지도 엘리먼트 내부의 레이어 위치를 반영한 좌표이다.
지도 영역 밖의 마커위치 추적하기 샘플보기

var mapProjection = map.getProjection(),
    latlng = new kakao.maps.LatLng(33.450701, 126.570667);

mapProjection.pointFromCoords(latlng); // 지도 좌표에 해당하는 위치 좌표

Parameters

• latlng LatLng

Returns

• Point

coordsFromPoint(point)

위치 좌표(pixel)에 해당하는 지도 좌표를 반환한다.
해당 위치 좌표는 지도 엘리먼트 내부의 타일 레이어 위치를 반영한 좌표이다.
지도 영역 밖의 마커위치 추적하기 샘플보기

var mapProjection = map.getProjection(),
    point = new kakao.maps.Point(200, 100);

mapProjection.coordsFromPoint(point); // 위치 좌표에 해당하는 지도 좌표

Parameters

• point Point

Returns

• LatLng

containerPointFromCoords(latlng)

지도 좌표에 해당하는 화면 좌표(pixel)를 반환한다.
해당 화면 좌표는 지도 엘리먼트의 좌상단을 기준으로 한 좌표이다.
커스텀오버레이를 드래그 하기 샘플보기

var mapProjection = map.getProjection(),
    latlng = new kakao.maps.LatLng(33.450701, 126.570667);

mapProjection.containerPointFromCoords(latlng); // 지도 좌표에 해당하는 화면 좌표

Parameters

• latlng LatLng

Returns

• Point

coordsFromContainerPoint(point)

화면 좌표(pixel)에 해당하는 지도 좌표를 반환한다.
해당 화면 좌표는 지도 엘리먼트의 좌상단을 기준으로 한 좌표이다.
커스텀오버레이를 드래그 하기 샘플보기

var mapProjection = map.getProjection(),
    point = new kakao.maps.Point(200, 100);

mapProjection.coordsFromContainerPoint(point); // 화면 좌표에 해당하는 지도 좌표

Parameters

• point Point

Returns

• LatLng

Polyline Methods Events

폴리라인 객체

Constructor

kakao.maps.Polyline(options)

주어진 객체로 폴리라인을 생성한다.
원, 선, 사각형, 다각형 표시하기 샘플보기

var polyline = new kakao.maps.Polyline({
    map: map,
    path: [
        new kakao.maps.LatLng(33.452344169439975, 126.56878163224233),
        new kakao.maps.LatLng(33.452739313807456, 126.5709308145358),
        new kakao.maps.LatLng(33.45178067090639, 126.5726886938753) 
    ],
    strokeWeight: 2,
    strokeColor: '#FF00FF',
    strokeOpacity: 0.8,
    strokeStyle: 'dashed'
});

Parameters

• options Object
  • endArrow Boolean : 화살표 여부
  • path Array.< LatLng > | Array.<Array.< LatLng >> : 폴리라인을 구성하는 좌표의 배열 또는 좌표 배열의 배열
  • strokeWeight Number : 픽셀 단위의 선 두께 (기본값: 3)
  • strokeColor String : #xxxxxx 형태의 선 색 (기본값: ‘#F10000’)
  • strokeOpacity Number : 선 불투명도 (0-1) (기본값: 0.6)
  • strokeStyle String : 선 스타일 (기본값: ‘solid’)
  • zIndex Number : 선의 z-index 속성 값

Methods

setMap(map)

지도에 폴리라인을 올린다.
null 을 지정하면 폴리라인을 제거한다.

polyline.setMap(map); // 지도에 올린다.
polyline.setMap(null); // 지도에서 제거한다.

Parameters

• map Map

getMap()

폴리라인이 올라가있는 지도를 반환한다.

polyline.getMap(); // kakao.maps.Map

Returns

• Map

setOptions(options)

폴리라인의 옵션을 설정한다.

polyline.setOptions({
    strokeWeight: 2,
    strokeColor: '#FF00FF',
    strokeOpacity: 0.8,
    strokeStyle: 'dashed'
});

Parameters

• options : Object

setPath(path)

폴리라인의 경로를 지정한다.
경로는 좌표의 배열로 표현한다.

var newpath = [
    new kakao.maps.LatLng(33.452344169439975, 126.56878163224233),
    new kakao.maps.LatLng(33.452739313807456, 126.5709308145358),
    new kakao.maps.LatLng(33.45178067090639, 126.5726886938753) 
];

polyline.setPath(newpath);

Parameters

• path : Array.< LatLng > : 좌표의 배열

getPath()

폴리라인의 경로를 반환한다.

polyline.getPath(); // 경로정보가 배열로 반환된다.

Returns

• Array.< LatLng >

getLength()

폴리라인의 총 길이를 m(미터)단위로 반환한다.
선의 거리 계산하기 샘플보기

polyline.getLength(); 

Returns

• Number

setZIndex()

폴리라인의 z-index를 설정한다.

polyline.setZIndex(3);

Parameters

• zIndex Number

getZIndex()

폴리라인의 z-index를 반환한다.

var polyline = new kakao.maps.Polyline({
    zIndex: 4
});
polyline.getZIndex(); // 4

Returns

• Number

Events

안드로이드 2.3버전 이하에서는 Event를 지원하지 않습니다.

mouseover

폴리라인에 마우스 커서를 올리면 발생한다.

kakao.maps.event.addListener(polyline, 'mouseover', function(mouseEvent) {  
    var latlng = mouseEvent.latLng;
    console.log(latlng.toString());         
});