지도 기본 예제

아주 간단히 지도만 생성해보는 예제입니다.
처음이니까 초간단으로 그냥 해봅시다. ^^

Naver Map v3 초간단 지도 생성 예제

네이버 지도 스크립트 로딩

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

CSS

#map_v3 {
	height:600px;
	margin:0 auto;
	max-width:100%;
	width:900px;
}

HTML

<!-- 이 div 에 지도가 생성됩니다. -->
<div id="map_v3"></div>

자바스크립트

// div 에 설정된 id 값을 이용해서 지도를 생성합니다.
new naver.maps.Map('map_v3', { // map_v3 사용

	// 지도위치 설정. 위도, 경도를 입력합니다.
	center : new naver.maps.LatLng( 37.2900533, 127.1036797 ),

	// 지도 줌 상태. 값은 1~14 이고 클수록 지도가 확대됩니다. (줌인)
	zoom : 10,

	// 일반, 위성 컨트롤 버튼 보이기
	mapTypeControl : true

});

실행 가능한 소스

<!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/226" target="_blank">https://ktsmemo.cafe24.com/s/naver_map_v3/226</a>
</div>


<!-- 예제 시작 -->

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

<style type="text/css">

#map_v3 {
	height:600px;
	margin:0 auto;
	max-width:100%;
	width:900px;
}

</style>

<!-- 이 div 에 지도가 생성됩니다. -->
<div id="map_v3"></div>

<script>

// div 에 설정된 id 값을 이용해서 지도를 생성합니다.
new naver.maps.Map('map_v3', { // map_v3 사용

	// 지도위치 설정. 위도, 경도를 입력합니다.
	center : new naver.maps.LatLng( 37.2900533, 127.1036797 ),

	// 지도 줌 상태. 값은 1~14 이고 클수록 지도가 확대됩니다. (줌인)
	zoom : 10,

	// 일반, 위성 컨트롤 버튼 보이기
	mapTypeControl : true

});

</script>

<!-- 예제 종료 -->


</body>
</html>

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