네이버 지도 JavaScript v3 API연동 (2개이상 지도 삽입가능) > 기술자료 | 해피정닷컴

네이버 지도 JavaScript v3 API연동 (2개이상 지도 삽입가능) > 기술자료

본문 바로가기

사이트 내 전체검색

네이버 지도 JavaScript v3 API연동 (2개이상 지도 삽입가능) > 기술자료

JavaScript 네이버 지도 JavaScript v3 API연동 (2개이상 지도 삽입가능)

페이지 정보


첨부파일

본문

동일페이지에 2개이상 지도를 삽입할때 사용가능하게 만들었습니다.
네이버 지도 API https://navermaps.github.io/maps.js/docs/tutorial-1-Getting-Client-ID.html 참고
2018-11-13 https://www.ncloud.com/ 에서 지도 api 로 신청 및 관리
2020-04-08 clientId 호출 인수 변경  clientId -> ncpClientId

<?php
$clientId = "YOUR_CLIENT_ID";  // YOUR_CLIENT_ID
$client_secret = "YOUR_CLIENT_SECRET";  // YOUR_CLIENT_SECRET
$mapIdx = "1"; // 페이지내에서 2개이상 노출할때 충돌 방지를 위해

$mapX = "37.480702";
$mapY = "126.892883";
?>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=<?php echo $clientId; ?>&submodules=geocoder"></script>
<div id="map<?php echo $mapIdx; ?>" style="width:100%;height:400px;"></div>

<script>
var mapOptions<?php echo $mapIdx; ?> = {
    center: new naver.maps.LatLng(<?php echo $mapX; ?>, <?php echo $mapY; ?>),
    zoom: 12
};

var iSize<?php echo $mapIdx; ?> = new naver.maps.Size(65, 76);
var iOffset<?php echo $mapIdx; ?> = new naver.maps.Size(14, 37);
var map<?php echo $mapIdx; ?> = new naver.maps.Map('map<?php echo $mapIdx; ?>', mapOptions2);

var marker<?php echo $mapIdx; ?> = new naver.maps.Marker({
    position: new naver.maps.LatLng(<?php echo $mapX; ?>, <?php echo $mapY; ?>),
    map: map<?php echo $mapIdx; ?>,
    icon : {
        content : '<img src="/demo/map/map_icon.png">',
        size : iSize<?php echo $mapIdx; ?>,
        anchor : iOffset<?php echo $mapIdx; ?>
    }
});
</script>


참고자료
https://blog.naver.com/jjeong_in/221412542538
http://blog.naver.com/PostView.nhn?blogId=plsense&logNo=221402878555
 

댓글목록

등록된 댓글이 없습니다.


Total 2,641건 1 페이지
  • RSS
기술자료 목록
2641
그누보드   186  2024-11-26 21:14 ~ 2024-11-26 21:22  
2640
그누보드   221  2024-11-22 10:52 ~ 2024-11-22 11:03  
2639
호스팅   216  2024-11-19 14:41 ~ 2024-11-19 21:17  
2638
Linux   156  2024-11-18 15:45 ~ 2024-11-18 15:48  
2637
일반   175  2024-11-15 16:45 ~ 2024-11-15 16:46  
2636
Secure   197  2024-11-06 18:48 ~ 2024-11-06 18:50  
2635
영카트   352  2024-10-21 13:44 ~ 2024-10-21 19:42  
2634
전자결제   743  2024-09-05 09:30  
2633
MySQL   998  2024-03-29 14:14 ~ 2024-03-29 14:14  
2632
그누보드   1236  2024-02-23 18:40 ~ 2024-02-24 06:13  
2631
JavaScript   1354  2024-02-16 18:50 ~ 2024-02-16 20:37  
2630
Java   1306  2024-02-06 16:49  
2629
PHP   1488  2024-02-06 16:42  
2628
호스팅   1402  2024-01-29 12:54  
2627
PHP   1366  2024-01-26 11:04 ~ 2024-01-26 11:13  
2626
MySQL   1539  2024-01-08 17:37 ~ 2024-03-14 16:00  
2625
SQL   1714  2024-01-08 12:36  
2624
영카트   1748  2024-01-04 14:57  
2623
일반   2635  2023-12-15 18:33  
2622
Android   2101  2023-11-30 18:48 ~ 2023-11-30 19:41  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.