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

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

기술자료

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

페이지 정보

댓글 0건 조회 119회 수정일 18-08-03 03:37

본문

샘플보기 : 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="//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,263건 1 페이지
기술자료 목록
번호 제목
공지 일반
온라인 강좌를 소개합니다. ( update. 2017-12-05 16:33 ) Hit.16174
2262 PHP
2261 HTML
이미지맵 영역 링크 흔적 지우기 ( write. 2018-08-18 ) Hit.20
2260 일반
폴더 파일리스트 추출하기 ( update. 2018-08-17 15:19 ) Hit.15
2259 HTML
2258 HTML
CSS를 사용하여 이미지를 어둡게합니다. ( update. 2018-08-15 05:58 ) Hit.27
2257 HTML
2256 HTML
[CSS] input checkbox / radio 크기 변경하기 ( update. 2018-08-09 13:26 ) Hit.53
2255 JavaScript
[jQuery] 마우스 오버하여 이미지 변경하기 ( update. 2018-08-02 14:39 ) Hit.92
2254 PHP
파일 업로드 시 한글 파일명 깨짐 방지 ( update. 2018-08-01 05:45 ) Hit.85
2253 일반
2252 PHP
php파일로 실행될 확장자 추가하기 ( write. 2018-07-26 ) Hit.139
열람중 JavaScript
네이버 지도 API 3.0 활용 멀티맵 만들기 ( update. 2018-08-03 03:37 ) Hit.120
2250 그누보드
2249 JavaScript
scroll 상단으로 ( update. 2018-07-23 16:45 ) Hit.119
2248 HTML
2247 PHP
2246 그누보드
2245 JSP
2244 JSP
tomcat catalina.out 재시작 없이 초기화시키기 ( update. 2018-07-26 19:25 ) Hit.145
2243 HTML
2242 일반
2241 그누보드
2240 Linux
2239 제로보드
[XpressEngine] files 폴더의 비밀 ( update. 2018-07-13 21:51 ) Hit.90
게시물 검색

회원로그인

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

접속자집계

오늘
1,204
어제
2,446
최대
3,174
전체
4,199,230

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