1. head에 네이버 지도를 달아준다
<script
src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId={본인의 클라이언트 아이디}&submodules=geocoder"
type="text/javascript"></script>
2. 지도를 넣고싶은 자리에 코드를 넣어준다
<div id="map" padding="10px" style="width:1000px; height:450px;"></div>
3. 자바스크립트 코드를 작성한다
<script>
var lat = 37.3614483;
var lng = 127.1114883;
var latlng;
function drawMap(lat, lng) {
map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(lat, lng),
zoom: 16
}),
infoWindow = null;
}
var map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(lat, lng),
zoom: 16
}),
infoWindow = null;
function initGeocoder() {
latlng = map.getCenter();
infoWindow = new naver.maps.InfoWindow({
content: ''
});
map.addListener('click', function (e) {
latlng = e.coord;
infoWindow.setContent([
'<div style="padding:10px;width:10px;line-height:20px;">',
'<div> ' + ' ' + '</div>',
'</div>'
].join(''));
infoWindow.open(map, latlng);
});
}
naver.maps.onJSContentLoaded = initGeocoder;
</script>
나는 알 수 없는 이유로 naver.maps.Event.addListener 가 활성화되지 않아서
naver.maps.만으로 쓸 수 있는 infowindow를 응용해서 사용했다
지도를 클릭하면 인포윈도우가 뜨고 그 좌표의 경도와 위도가 전역변수인 latlng에 저장된다
map.addListener('click', function (e) {
latlng = e.coord;
'TIL(Develop)' 카테고리의 다른 글
Spring Framework 란? (0) | 2024.05.06 |
---|---|
네이버 지도 API에 좌표로 마커 표시하기 (0) | 2024.03.25 |
네이버 지도 API 사용하기 (0) | 2024.03.25 |
클라이언트에서 데이터를 받아오는 방법 (2) | 2023.12.06 |
인증과 인가 (2) | 2023.11.20 |