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