네이버 지도 api 예제

그냥 지도만 생성해 보기

전체 기초 간단 예제
등록일 :

기본 지도 생성

아무 옵션없이 지도만 생성해 본 예제입니다.

- 서울 시청이 중앙에 위치합니다.
- 지도에 아무런 컨트롤 UI가 없습니다.

지도 스크립트 로딩

<!-- 사용한 지도 Client ID : mn7cwsrvym 은 "localhost" 에서 테스트 용도로 사용할 수 있습니다. -->
<script src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=mn7cwsrvym"></script>

CSS

#nmap {
	height:550px;
	margin:0 auto;
	width:1000px;
	max-width:100%;
}

HTML

<!-- 지도가 생성될 div, id 속성값은 nmap -->
<div id="nmap"></div>

자바스크립트

// id 속성값 nmap 에 지도 생성
new naver.maps.Map('nmap');

실행 가능한 소스

기본형 지도 2개 동시 생성


id 값을 다르게 하면 간편하게 2개 이상의 지도를 생성할 수 있습니다.

- 두개를 연동해서 뭔가 만들어 볼 수 있겠군요.
- 서로 연동되어 움직이면서 한쪽은 일반, 한쪽은 위성 지도 같은 ...

지도 스크립트 로딩

<!-- 사용한 지도 Client ID : mn7cwsrvym 은 "localhost" 에서 테스트 용도로 사용할 수 있습니다. -->
<script src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=mn7cwsrvym"></script>

CSS

.wrap_nmap {
	text-align:center;
}
.wrap_nmap .nmap {
	height:400px;
	width:900px;
	max-width:100%;
	margin:0 auto;
}

HTML

<!-- 지도가 생성될 div, id 속성값은 nmap1, nmap2 -->
<div class="wrap_nmap">
	<div class="nmap" id="nmap1"></div>
	<div class="nmap" id="nmap2"></div>
</div>

자바스크립트

// id 속성값 nmap1 에 지도 생성
new naver.maps.Map('nmap1');

// id 속성값 nmap2 에 지도 생성
new naver.maps.Map('nmap2');

실행 가능한 소스

4개 한번 해봅니다

이걸 몇개나 하면 브라우저가 힘들어할지 궁금하지만
여기서는 해보면 안되겠죠.


지도 스크립트 로딩

<!-- 사용한 지도 Client ID : mn7cwsrvym 은 "localhost" 에서 테스트 용도로 사용할 수 있습니다. -->
<script src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=mn7cwsrvym"></script>

CSS

.wrap_nmap {
	text-align:center;
}
.wrap_nmap .nmap {
	height:350px;
	width:550px;
	display:inline-block; /* 지도를 나란히 두개 배치하기 위한 */
}

HTML

<!-- 지도가 생성될 div -->
<div class="wrap_nmap">
	<div class="nmap" id="nmap1"></div>
	<div class="nmap" id="nmap2"></div><br>
	<div class="nmap" id="nmap3"></div>
	<div class="nmap" id="nmap4"></div>
</div>

자바스크립트

// id 속성값 nmap1 에 지도 생성
new naver.maps.Map('nmap1');

// id 속성값 nmap2 에 지도 생성
new naver.maps.Map('nmap2');

// id 속성값 nmap3 에 지도 생성
new naver.maps.Map('nmap3');

// id 속성값 nmap4 에 지도 생성
new naver.maps.Map('nmap4');

실행 가능한 소스

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