네이버 지도를 달아보자

지도 두개 달아서 연동해 보기

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

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

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

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

※ 현재 예제는 v2 버전입니다. v3 버전도 곧 준비해 보겠습니다. v2 버전 예제도 다 못했는데요 ..^^;
지도를 두개 달아서 최대한 이것 저것 해보는 예제입니다.
그럼 시작해 볼까요? ㅎ

왼쪽 지도를 클릭하여 오른쪽 지도를 해당위치로 이동시키기

왼쪽 지도를 클릭해 보세요. 그러면 오른쪽 지도가 클릭한 위치로 이동합니다.

※ 서울 한복판에 왠 숲이 있을까요 ?? ... ^^;
<div style="text-align:center;">
	<div id="nmap" style="display:inline-block; width:550px; height:500px;"></div>
	<div id="nmap2" style="display:inline-block; width:550px; height:500px;"></div>
</div>

<script type="text/javascript">

	var map = new nhn.api.map.Map('nmap', { // nmap 은 지도가 생성될 요소의 id값 입니다
		point : new nhn.api.map.LatLng(37.5313999, 126.9818986), // 위도, 경도 설정
		zoom : 6, // 줌 설정 (1~14), 클수록 확대
	});

	var map2 = new nhn.api.map.Map('nmap2', { // nmap2 는 지도가 생성될 요소의 id값 입니다
		point : new nhn.api.map.LatLng(37.5313999, 126.9818986), // 위도, 경도 설정
		mapMode : 2, // 위성 지도 모드
		zoom : 9, // 줌 설정 (1~14), 클수록 확대
	});

	// 지도에 클릭이벤트 추가
	map.attach('click', function(evt){
		// setCenter 를 이용하여 오른쪽 지도의 중간위치를 클릭한 외쪽 지도의 위치로 맞추기
		map2.setCenter(new nhn.api.map.LatLng(evt.point.getY(), evt.point.getX()));
	});

</script>

두개의 지도 동기화

왼쪽 지도를 움직여 보세요. 확대 축소도 해보세요. ^^
<script src="http://openapi.map.naver.com/openapi/v2/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>
<!-- clientId 값을 발급받은 키로 변경하세요 -->
<div style="text-align:center;">
	<div id="nmap" style="display:inline-block; width:550px; height:500px;"></div>
	<div id="nmap2" style="display:inline-block; width:550px; height:500px;"></div>
</div>

<script type="text/javascript">

	var left_map = new nhn.api.map.Map('nmap', { // nmap 은 지도가 생성될 요소의 id값 입니다
		point : new nhn.api.map.LatLng(33.3610509, 126.5326893), // 위도, 경도 설정
		zoom : 11, // 줌 설정 (1~14), 클수록 확대
	});

	var right_map = new nhn.api.map.Map('nmap2', { // nmap2 는 지도가 생성될 요소의 id값 입니다
		point : new nhn.api.map.LatLng(33.3610509, 126.5326893), // 위도, 경도 설정
		mapMode : 2, // 위성 지도 모드
		zoom : 11, // 줌 설정 (1~14), 클수록 확대
	});


	// 왼쪽 지도 드래그종료시 이벤트 추가
	left_map.attach('dragend', function(){
		right_map.setCenter(left_map.getCenter());
	});

	// 왼쪽 지도 확대 축소시 이벤트 추가
	left_map.attach('zoom', function(){
		right_map.setLevel(left_map.getLevel());
	});

</script>

원래는 실시간으로 동기화 해보려고 했는데 잘 안되는 군요... ㅠㅠ
드래그나 줌이 끝났을 동기화 됩니다.

실행 가능한 소스

방문해 주셔서 감사드립니다 !!