네이버 지도를 달아보자

마커 추가하기

전체 기초 기능별 예제 예제 모음
등록일 :

!! 네이버 지도 v2 버전 종료 안내 !!

에 v2 버전 지도 서비스가 종료되었습니다.
이제 v3 버전을 써야할 때가 되었습니다.
기존 서비스를 이렇게 종료할때가 제일 부들부들한 경우인데요 ...

v2 와 v3 는 지도 사용 방법이 다릅니다. v3 버전이 확실히 개선된 방법입니다.

※ 현재 예제는 v2 버전입니다. v3 버전도 곧 준비해 보겠습니다. v2 버전 예제도 다 못했는데요 ..^^;

지도에 마커 추가하기

네이버 지도에 마커를 추가해 봅시다.

<!-- 키는 발급받은 것으로 변경해 주세요 -->
<script src="https://openapi.map.naver.com/openapi/v2/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>

<div id="nmap" style="width:1200px; height:600px;"></div>

<script type="text/javascript">

	// 지도 생성
	var nmap = new nhn.api.map.Map('nmap', { // nmap 은 지도가 생성될 요소의 id값 입니다 (원하시는 데로 네이밍!)
		point : new nhn.api.map.LatLng(37.5788434, 126.9770207), // 위도, 경도 설정 (이 값을 가운데로 하여 지도 생성)
		zoom : 11 // 줌 설정
	});


	// 마커로 사용할 이미지 정의
	var marker_icon = new nhn.api.map.Icon('http://superkts.com/img/marker_arrive.png', new nhn.api.map.Size(32, 46), new nhn.api.map.Size(16, 46));

	// 마커 정의
	var marker = new nhn.api.map.Marker(marker_icon, {point:new nhn.api.map.LatLng(37.5788434, 126.9770207)});

	// 지도에 마커 추가하기
	nmap.addOverlay(marker);

</script>

실행 가능한 소스

마커 아이콘(nhn.api.map.Icon) 설정을 잘못하면?

설명이 좀 어려워서(?) 잘못 사용하면 어떻게 되는지 보는것으로 대신하겠습니다.
지도를 확대 축소하면서 마커의 위치가 어긋나는것을 확인해 보세요.

원래 마커는 지도상 산모퉁이 카페의 커피 아이콘을 중심으로 했지만 어긋났습니다.

<div id="nmap" style="width:1100px; height:600px;"></div>

<script type="text/javascript">

	var nmap = new nhn.api.map.Map('nmap', {
		point : new nhn.api.map.LatLng(37.5954217, 126.9679161),
		zoom : 14
	});


	// 마커로 사용할 이미지 설정값이 잘못된 경우
	var marker_icon = new nhn.api.map.Icon('http://superkts.com/img/marker_arrive.png', new nhn.api.map.Size(32, 46), new nhn.api.map.Size(32, 46));

	var marker = new nhn.api.map.Marker(marker_icon, {point:new nhn.api.map.LatLng(37.5954217, 126.9679161)});

	nmap.addOverlay(marker);

</script>

마커 위치를 정확하게

위 잘못된 예제와 달리 정확하게 목표물에 마커가 들어갔습니다.
확대, 축소해도 위치를 잘 유지합니다.

<div id="nmap" style="width:1100px; height:600px;"></div>

<script type="text/javascript">

	var nmap = new nhn.api.map.Map('nmap', {
		point : new nhn.api.map.LatLng(37.5954217, 126.9679161),
		zoom : 14
	});


	// 마커로 사용할 이미지 설정값을 맞게 설정
	var marker_icon = new nhn.api.map.Icon('http://superkts.com/img/marker_arrive.png', new nhn.api.map.Size(32, 46), new nhn.api.map.Size(16, 46));

	var marker = new nhn.api.map.Marker(marker_icon, {point:new nhn.api.map.LatLng(37.5954217, 126.9679161)});

	nmap.addOverlay(marker);

</script>


※ 산모퉁이 카페는 "커피프린스 1호점 에서 이선균의 집" 으로 나왔던 곳입니다.

마커 아이콘 설정하기

new nhn.api.map.Icon( '이미지 경로', 이미지 사이즈, 이미지 위치조정 );

이미지 경로 : 이미지의 URL 입력
이미지 사이즈 : new nhn.api.map.Size(너비, 높이)  이미지 너비와 높이를 숫자로 입력
이미지 위치조정 : new nhn.api.map.Size(가로, 세로)  마커가 가리키는 지점이 지도상 목표에 맞도록 수치조정


사용한 마커 이미지

이미지 위치조정에 대한 추가 설명입니다.
보통 위와 같은 형태로 아래가 뾰족한 모양의 마커를 사용합니다. 그 뾰족한 부분이 특정 지점에 위치하게 되죠.
위 이미지는 너비 32px 높이 46px 입니다.

예제에서는 new nhn.api.map.Size(16, 46) 처럼 사용했습니다.
표족한 부분의 위치는 이미지 아래 중간입니다. 16, 46 이란 값을 지정합니다.
여기서 16은 너비 32를 반으로 나눈값입니다.
마커 모양이나 사이즈에 따라 적절히 입력해서 사용하면 됩니다.

즉 이미지 왼쪽위를 기준으로 가로 16 세로 46에 마커 포인트가 있다는 의미입니다.

마커를 다양하게 넣어보자

이 예제를 마지막으로 턴을 마치겠습니다.

<div id="nmap" style="width:1100px; height:700px; border:5px solid #008200; border-radius:3px;"></div>

<script type="text/javascript">

	var nmap = new nhn.api.map.Map('nmap', {
		point : new nhn.api.map.LatLng(37.4236619, 127.0218764),
		zoom : 12
	});


	var tmp;

	// 일반, 위성 버튼
	tmp = new nhn.api.map.MapTypeBtn();
	tmp.setPosition({top:10, right:10}); // 위치 설정
	nmap.addControl(tmp); // 지도에 추가

	// 줌 슬라이더 컨트롤
	tmp = new nhn.api.map.ZoomControl();
	tmp.setPosition({top:60, right:10}); // 위치 설정
	nmap.addControl(tmp); // 지도에 추가


	// 마커 넣기
	var animal1 = new nhn.api.map.Icon('http://superkts.com/img/css/bird34.gif', new nhn.api.map.Size(26, 30), new nhn.api.map.Size(13, 30));
	nmap.addOverlay(new nhn.api.map.Marker(animal1, { point:new nhn.api.map.LatLng(37.422613, 127.0203686) }));

	var animal2 = new nhn.api.map.Icon('http://superkts.com/img/css/dog054.gif', new nhn.api.map.Size(32, 32), new nhn.api.map.Size(0, 32));
	nmap.addOverlay(new nhn.api.map.Marker(animal2, { point:new nhn.api.map.LatLng(37.4238427, 127.0230992) }));

	var animal3 = new nhn.api.map.Icon('http://superkts.com/img/css/bird17.gif', new nhn.api.map.Size(112, 100), new nhn.api.map.Size(56, 100));
	nmap.addOverlay(new nhn.api.map.Marker(animal3, { point:new nhn.api.map.LatLng(37.4249346, 127.0194214) }));

	var animal4 = new nhn.api.map.Icon('http://superkts.com/img/css/rabbit018.gif', new nhn.api.map.Size(74, 40), new nhn.api.map.Size(37, 40));
	nmap.addOverlay(new nhn.api.map.Marker(animal4, { point:new nhn.api.map.LatLng(37.4223152, 127.0247499) }));

	var animal5 = new nhn.api.map.Icon('http://superkts.com/img/css/fish0046.gif', new nhn.api.map.Size(24, 11), new nhn.api.map.Size(12, 0));
	nmap.addOverlay(new nhn.api.map.Marker(animal5, { point:new nhn.api.map.LatLng(37.4218458, 127.0223434) }));

</script>
방문해 주셔서 감사드립니다 !!