네이버 지도 api 여러개 연동하기
본문
네이버 지도 api를 이용해서 한페이지에 지도 2개를 쓰려고 하니 처음꺼만 잘나오고 두번째꺼는 반만 잘리듯이 나오는데 소스 어디를 어떻게 변경해야할지 몰라서 여쭤봅니다ㅠㅠ
<div id="gmap"></div>
<script>
//지도를 삽입할 HTML 요소 또는 HTML 요소의 id를 지정합니다.
var mapDiv = document.getElementById('gmap'); // 'map'으로 선언해도 동일
var HOME_PATH = window.HOME_PATH || '.';
var position = new naver.maps.LatLng(35.835614, 129.209786);
var map = new naver.maps.Map('gmap', {
center: position,
zoom: 19
});
var markerOptions = {
position: position.destinationPoint(90, 15),
map: map,
icon: {
url: HOME_PATH +'/img/map_icon.png',
size: new naver.maps.Size(50, 52),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(25, 26)
}
};
var marker = new naver.maps.Marker(markerOptions);
</script>
이게 첫번째 지도고
<div id="umap"></div>
<script>
//지도를 삽입할 HTML 요소 또는 HTML 요소의 id를 지정합니다.
var mapDiv = document.getElementById('umap'); // 'map'으로 선언해도 동일
var HOME_PATH = window.HOME_PATH || '.';
var position = new naver.maps.LatLng(35.538289, 129.334081);
var map = new naver.maps.Map('umap', {
center: position,
zoom: 19
});
var markerOptions = {
position: position.destinationPoint(90, 15),
map: map,
icon: {
url: HOME_PATH +'/img/map_icon.png',
size: new naver.maps.Size(50, 52),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(25, 26)
}
};
var marker = new naver.maps.Marker(markerOptions);
</script>
이게 반만 나오는 두번째 지도입니다
!-->!-->답변 2
<div id="umap"></div>
<script>
//지도를 삽입할 HTML 요소 또는 HTML 요소의 id를 지정합니다.
var mapDiv_1 = document.getElementById('umap'); // 'map'으로 선언해도 동일
var HOME_PATH = window.HOME_PATH || '.';
var position_1 = new naver.maps.LatLng(35.538289, 129.334081);
var map_1 = new naver.maps.Map('umap', {
center: position_1,
zoom: 19
});
var markerOptions_1 = {
position: position_1.destinationPoint(90, 15),
map: map_1,
icon: {
url: HOME_PATH +'/img/map_icon.png',
size: new naver.maps.Size(50, 52),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(25, 26)
}
};
var marker = new naver.maps.Marker(markerOptions_1);
</script>
이렇게 한번 테스트해 보세요. 두번째 스크립트의 변수를 모두 변경해 보세요.
주소가 있으면 더 찍어 보기가 편할 것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.