기본 지도 생성

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

- 서울 시청이 중앙에 위치합니다.
- 지도에 아무런 컨트롤 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');

실행 가능한 소스

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>네이버 지도 api 예제 : 기초 : 그냥 지도만 생성해 보기</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div style="text-align:center; margin:0 0 100px 0; background:#555; line-height:80px;">
	<a style="color:#fff; font-weight:bold; font-family:tahoma; font-size:20pt;" href="https://ktsmemo.cafe24.com/s/naver_map_v3/255" target="_blank">https://ktsmemo.cafe24.com/s/naver_map_v3/255</a>
</div>


<!-- 예제 시작 -->

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

<style type="text/css">

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

</style>

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

<script>

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

</script>

<!-- 예제 종료 -->


</body>
</html>

기본형 지도 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');

실행 가능한 소스

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>네이버 지도 api 예제 : 기초 : 그냥 지도만 생성해 보기</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div style="text-align:center; margin:0 0 100px 0; background:#555; line-height:80px;">
	<a style="color:#fff; font-weight:bold; font-family:tahoma; font-size:20pt;" href="https://ktsmemo.cafe24.com/s/naver_map_v3/255" target="_blank">https://ktsmemo.cafe24.com/s/naver_map_v3/255</a>
</div>


<!-- 예제 시작 -->

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

<style type="text/css">

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

</style>

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

<script>

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

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

</script>

<!-- 예제 종료 -->


</body>
</html>

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');

실행 가능한 소스

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>네이버 지도 api 예제 : 기초 : 그냥 지도만 생성해 보기</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div style="text-align:center; margin:0 0 100px 0; background:#555; line-height:80px;">
	<a style="color:#fff; font-weight:bold; font-family:tahoma; font-size:20pt;" href="https://ktsmemo.cafe24.com/s/naver_map_v3/255" target="_blank">https://ktsmemo.cafe24.com/s/naver_map_v3/255</a>
</div>


<!-- 예제 시작 -->

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

<style type="text/css">

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

</style>

<!-- 지도가 생성될 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>

<script>

// 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');

</script>

<!-- 예제 종료 -->


</body>
</html>

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