forked from seeno81/maps.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshowcase.html
151 lines (142 loc) · 7.68 KB
/
showcase.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="ko">
<head>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="/favicon.ico" rel="icon" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta content="origin-when-cross-origin" name="referrer">
<title>Showcase | 네이버 지도 API v3</title>
<link rel="canonical" href="https://navermaps.github.io/maps.js/showcase.html">
<meta name="description" content="네이버 지도 API v3 쇼케이스 - 네이버의 다양한 서비스에서 네이버 지도 API를 사용하고 있습니다. 어떻게 사용하는지 살펴보세요.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="NAVER Maps API v3 바로가기">
<meta property="og:title" content="NAVER Maps API v3">
<meta property="og:description" content="NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.">
<meta property="og:image" content="https://navermaps.github.io/maps.js/docs/img/logo_200x200.png">
<meta property="og:url" content="https://navermaps.github.io/maps.js/index.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="NAVER Maps API v3">
<meta name="twitter:description" content="NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.">
<meta name="twitter:image" content="https://navermaps.github.io/maps.js/docs/img/logo_200x200.png">
<meta name="twitter:url" content="https://navermaps.github.io/maps.js/index.html">
<link rel="stylesheet" type="text/css" href="./docs/css/main.css">
</head>
<body>
<div id="wrap">
<!-- header -->
<div id="header">
<div class="inner_header">
<h1><a href="./index.html"><span class="logo">NAVER Maps</span><span class="sub_logo">Java Script API V3</span></a></h1>
<a id="btn-header-menu" href="#" class="btn_menu">메뉴</a>
<div id="header-menu" class="header_menu">
<ul>
<li><a href="./docs"><span>Documents</span></a></li>
<li><a href="./docs/tutorial-digest.example.html"><span>Examples</span></a></li>
<li><a href="https://developers.naver.com/notice" target="_blank"><span>Notice</span></a></li>
</ul>
</div>
</div>
</div>
<!-- //header -->
<!-- container -->
<!-- [D] showcase 페이지의 경우 class="api_showcase" 추가필요 -->
<div id="container" class="api_showcase">
<div class="ly_ribbon">
<a href="https://github.com/navermaps/maps.js" target="_blank">fork me on github</a>
</div>
<div class="spot">
<div class="inner_spot">
<h2 class="blind">naver maps javascript api v3 showcase</h2>
<p class="blind">네이버의 다양한 서비스에서 네이버 지도 API를 사용하고 있습니다. 어떻게 사용하는지 살펴보세요.</p>
</div>
</div>
<div id="naver_map" class="naver_map">
<div class="inner_naver_map">
<h3 class="blind">네이버 지도</h3>
<p>빠른 길찾기, 버스는 물론 지하철 노선도까지!<br>이젠, 원하는 장소를 네이버 지도로 한 번에 찾아보세요.</p>
<a href="https://m.map.naver.com" target="_blank">네이버 지도 바로가기</a>
</div>
</div>
<div id="naver_land" class="naver_land">
<div class="inner_naver_land">
<h3 class="blind">네이버 부동산</h3>
<p>PC, 모바일에서 집을 찾을 땐<br>네이버 부당산에서 지도로 쉽고 편리하게</p>
<a href="http://m.land.naver.com/article/index.nhn" target="_blank">네이버 부동산 바로가기</a>
</div>
</div>
<div id="naver_datalab" class="naver_datalab">
<div class="inner_naver_datalab">
<h3 class="blind">네이버 데이터랩</h3>
<p>지도에 표시된 아파트 실거래 지표를 통하여 지역별 거래 현황을 쉽게 파악할 수 있습니다.</p>
<a href="http://datalab.naver.com/local/land.naver" target="_blank">아파트 실거래 지표 바로가기</a>
</div>
</div>
<div id="naver_post" class="naver_post">
<div class="inner_naver_post">
<h3 class="blind">네이버 포스트</h3>
<p>콘텐츠 전문가가 모여 있는 프리미엄 콘텐츠 플랫폼이며,<br>우수 에디터를 발굴하고 육성하는 서비스</p>
<a href="http://post.editor.naver.com/editor" target="_blank">네이버 포스트 바로가기</a>
</div>
</div>
<div id="naver_modoo" class="naver_modoo">
<div class="inner_naver_modoo">
<h3 class="blind">네이버 modoo</h3>
<p>누구나, 손쉽게, 무료로 만드는<br>모바일 홈페이지의 모든 것! modoo.</p>
<a href="http://www.modoo.at/home/main/start" target="_blank">modoo! 바로가기</a>
</div>
</div>
<div class="section6">
<div class="bg_layer"></div>
<div class="inner_section6">
<h3 class="blind">Hello, NAVER Maps API</h3>
<p class="blind">네이버 지도 API는 무료로 제공됩니다. 클라이언트 ID를 등록하고, 지금 바로 사용해 보세요.</p>
<a href="https://developers.naver.com/register" class="btn_id" target="_blank"><span class="blind">클라이언트 ID 발급받기</span></a>
<div class="map_api_info">
<ul>
<li><a href="./docs" target="_blank" class="go reference"><span class="blind">기술문서 - 튜토리얼,API레퍼런스 등 유용한 기술문서를 읽어 보세요.</span></a></li>
<li><a href="https://github.com/navermaps/maps.js" target="_blank" class="go github"><span class="blind">GitHub - 예제 코드를 직접 사용해 보세요</span></a></li>
<li><a href="https://github.com/navermaps/maps.js/issues" target="_blank" class="go issue"><span class="blind">Issue - 버그는 신고해 주시고, 궁금한 것은 바로 문의해 주세요</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- container -->
<!-- footer -->
<div id="footer">
<div class="inner_footer">
<div class="footer_copright">
<a href="https://developers.naver.com" target="_blank">NAVER Developers</a>
<span>Copyright ⓒ NAVER Corp. All Rights Reserved.</span>
</div>
</div>
</div>
<!-- //footer -->
</div>
<script type="text/javascript" src="https://wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if (!wcs_add) var wcs_add = {};
wcs_add["wa"] = "ab0d1ce292d4cc";
wcs_do();
(function() {
var headerMenu = document.getElementById('header-menu'),
headerMenuBtn = document.getElementById('btn-header-menu');
headerMenuBtn.onclick = function(e) {
e.returnValue = false;
if (e.preventDefault) {
e.preventDefault();
}
var classNames = headerMenu.className;
if (classNames.indexOf('on') === -1) {
classNames += ' on';
} else {
classNames = 'header_menu';
}
headerMenu.className = classNames;
return false;
};
})();
</script>
</body>
</html>