아무 옵션없이 지도만 생성해 본 예제입니다.
- 서울 시청이 중앙에 위치합니다.
- 지도에 아무런 컨트롤 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');
실행 가능한 소스
방문해 주셔서 감사드립니다 !!