반응형
<index.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Naver 지도 표시하기</title>
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=클라이언트ID"></script>
</head>
<body>
<h1>NAVER MAP</h1>
<div id="map" style="width:100%;height:400px;"></div>
<script>
const locations = [
{ place:"건대입구역", lat: 37.539922, lng: 127.070609 },
{ place:"어린이대공원역", lat: 37.547263, lng: 127.074181 },
];
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.539922, 127.070609),
zoom: 14
});
for (var i = 0; i < locations.length; i++) {
var marker = new naver.maps.Marker({
map: map,
title: locations[i].place,
position: new naver.maps.LatLng(locations[i].lat, locations[i].lng),
});
}
</script>
</body>
</html>
반응형
'💻IT' 카테고리의 다른 글
| [Google Maps API] 구글 맵 API 작업 - 인포윈도우, 클릭이벤트 처리 (0) | 2021.05.01 |
|---|---|
| [Kakao Maps API] 카카오 맵 API 지도 마커표시 예제 (0) | 2021.05.01 |
| [Google Maps API] 구글 맵 API 다중 마커 표시 (0) | 2021.04.30 |
| [Google Maps API] Google 지도를 제대로 로드할 수 없습니다. 해결 방법 (1) | 2021.04.30 |
| RESTful API 의미와 설계 규칙 (4) | 2021.04.15 |