네이버 지도 api 여러개 연동하기

네이버 지도 api 여러개 연동하기

QA

네이버 지도 api 여러개 연동하기

답변 2

본문

네이버 지도 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>

이렇게 한번 테스트해 보세요.  두번째 스크립트의 변수를 모두 변경해 보세요.

 

주소가 있으면 더 찍어 보기가 편할 것 같습니다. 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 7
© SIRSOFT
현재 페이지 제일 처음으로