네이버 지도 API 3.0 활용 멀티맵 만들기 > 기술자료

본문 바로가기
사이트 내 전체검색

기술자료

JavaScript 네이버 지도 API 3.0 활용 멀티맵 만들기

페이지 정보

댓글 0건 조회 284회 작성일 2018-07-25 14:30 ~ 2018-09-21 08:36

본문

샘플보기 : http://www.happyjung.com/demo/map/naver_multi.php


Map1<br>
<div id="naverMap1"></div>

Map2<br>
<div id="naverMap2"></div>


<?php
$clientId = "NaverAPI_ClientID";  // happyjung.com API
?>

<script src="//code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=<?php echo $clientId; ?>&submodules=geocoder"></script>

<script type="text/javascript" >
var strNaverMapKey="<?php echo $clientId; ?>";
</script>

<script>
    function multi_naverMap(divID, x, y, store_name) {

        var oPoint = new naver.maps.Point(37.6238066, 127.0732484);

        $("#"+divID).width("100%");
        $("#"+divID).height("100%");
        oSize = new naver.maps.Size($("#"+divID).width(), $("#"+divID).height());

        var oMap = new naver.maps.Map(divID ,{
            center : oPoint,
            zoom : 12,
            scrollWheel : true,
            draggable : true,
            disableDoubleClickZoom : false,
            mapTypeControl: false,
            minZoom : 1,
            maxZoom : 14,
            size : oSize,
            zoomControl : true,
            zoomControlOptions : {
                position: naver.maps.Position.TOP_RIGHT
            }
        });

        var iSize = new naver.maps.Size(65, 76);
        var iOffset = new naver.maps.Size(14, 37);

        var viewMap = function (x, y, storename){
            var oPoint = new naver.maps.Point(x, y);
            var oMarker = new naver.maps.Marker({
                title : storename,
                position : oPoint,
                icon : {
                    content : '<img src="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png">',
                    size : iSize,
                    anchor : iOffset
                }
            });
            if(typeof oMap === 'undefined'){
                setTimeout("viewMap('"+x+"','"+y+"','"+idx+"','"+storename+"')","3000");
            } else {
                oMarker.setMap(null);
                oMap.setCenter(oPoint);
                oMarker.setMap(oMap);
                naver.maps.Event.addListener(oMarker, 'click', function(e) {
                    var oTarget = e.overlay;
                    oMap.setCenter(oTarget.getPosition());
                });
            }
        };
        $(window).bind('resize', function () {
            $("#"+divID).width("100%");
            $("#"+divID).height("100%");
            oMap.setSize(new naver.maps.Size($("#"+divID).width(),$("#"+divID).height()));
        });
    viewMap(x, y, store_name);
    }
</script>

<script>
    // multi_naverMap("ID값", LatLngY, LatLngX, "설명");
    multi_naverMap("naverMap1", 126.890496, 37.480894, "해피정닷컴");
    multi_naverMap("naverMap2", 126.9664045, 37.5609433, "서울시청");
</script>
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 2,284건 1 페이지
기술자료 목록
번호 제목
공지 일반   16369  2001-08-31 11:52 ~ 2017-12-05 16:33  
2283 HTML   40  2018-10-14 01:19 ~ 2018-10-14 02:09  
2282 킴스큐   71  2018-10-04 23:04  
2281 MySQL   82  2018-10-03 02:29  
2280 MySQL   100  2018-10-02 22:55 ~ 2018-10-02 22:58  
2279 PHP   122  2018-09-30 15:07 ~ 2018-09-30 15:53  
2278 그누보드   135  2018-09-27 23:56  
2277 그누보드   113  2018-09-27 22:01 ~ 2018-09-27 22:40  
2276 그누보드   154  2018-09-22 01:04 ~ 2018-09-22 01:17  
2275 그누보드   145  2018-09-21 19:28  
2274 그누보드   184  2018-09-15 08:08 ~ 2018-10-15 14:56  
2273 PHP   241  2018-09-14 05:59  
2272 전자결제   177  2018-09-14 04:57 ~ 2018-09-14 04:58  
2271 전자결제   187  2018-09-12 14:17 ~ 2018-09-13 14:38  
2270 일반   332  2018-08-31 18:10 ~ 2018-09-14 20:50  
2269 HTML   255  2018-08-30 15:47  
2268 그누보드   261  2018-08-30 10:41 ~ 2018-08-30 10:48  
2267 PHP   241  2018-08-29 03:21 ~ 2018-08-29 17:13  
2266 JavaScript   311  2018-08-28 18:49  
2265 HTML   297  2018-08-27 14:33  
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
640
어제
2,548
최대
3,174
전체
4,324,927

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.