스프링에서 구글맵 연동하기

[    스프링에서 구글맵 연동하기    ]

스프링에서 구글맵을 연동하는 방법을 알아봅시다.

1. 먼저 구글 API 키를 다음 url로 들어가 얻습니다.

https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true

생성된 키는 곧 사용되니 잘 보관하고 계시고요

2. 두번째로 뷰단에서 html 코드를 작성합니다.

<div id="map"></div> 이 부분이 구글맵이 들어갈 자리고, style안에 #map 부분은 구글맵 컨테이너에 대한 스타일을 지정하는 부분입니다.

<style> #map { width: 100%; height: 400px; background-color: grey; } </style> <!-- GoogleMap API 연동(황영롱) --> <h3>글쓴이 위치</h3> <div id="map"></div> <!-- 지도가 붙을 위치 -->

3. script 쪽을 작성합시다.

getAddr() 함수 부분은 제 코드임으로 구글맵과는 연관성이 없음으로 빼주시면 되고요

function initMap() 부분에서 지도의 초기화화 그려주는 역할을 하게 됩니다.

<script async defer  src="https://maps.googleapis.com/maps/api/js?key=자신의API키를넣으세요&callback=initMap">

</script>

부분은 자신의 API키를 넣어서 map을 로딩하는 요청을 보낼 수 있도록하고, 해당 로딩이 완료되면 callback에 지정한 

initMap() 메서드로 콜백이 들어와 지도를 그려주게 됩니다.

나머지 마크에 대한 설정, 위도 경도 세팅에 대한 내용은 코드 주석을 참고하세요.

<script> var address = null; function getAddr(){ $.ajax({ type:'post', headers:{ "Content-Type":"application/json" }, async : false, // ajax를 동기화(순서대로) 처리해야하는 경우 true로하거나 기술하지 않으면 비동기로 작동한다. url:"/board/category/getAddr?userId=${boardDTO.userId}", dataType:"text", success : function(result){ if ( result != null ){ console.log("넘어온 값 : " + result); address = result; } } }); }; function initMap() { // 지도 요청시 callback으로 호출될 메서드 부분으로 지도를 맨처음 초기화하고, 표시해주는 함수 getAddr(); var latVal = ${boardDTO.lat}; // 게시글 DTO에서 위도값을 가져옴 var lngVal = ${boardDTO.lon}; // 게시글 DTO에서 경도값을 가져옴 var mapLocation = {lat: latVal, lng: lngVal}; // 위도, 경도를 가지는 객체를 생성 /* var map = new google.maps.Map(document.getElementById('map'), { // 위의 div id="map" 부분에 지도를 추가하는 부분 zoom: 18, // 확대 정도(ZOOM) center: uluru // 지도에 표시해주는 중심이 우리가 만든 객체의 위치를 지정해주도록 함 }); */ var mapOptions = { center: mapLocation, // 지도에서 가운데로 위치할 위도와 경도(변수) zoom: 18, // 지도 zoom단계 mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), // id: map-canvas, body에 있는 div태그의 id와 같아야 함 mapOptions); var size_x = 60; // 마커로 사용할 이미지의 가로 크기 var size_y = 60; // 마커로 사용할 이미지의 세로 크기 // 마커로 사용할 이미지 주소 var image = new google.maps.MarkerImage( 'http://www.weicherthallmark.com/wp-content/themes/realty/lib/images/map-marker/map-marker-gold-fat.png', new google.maps.Size(size_x, size_y), '', '', new google.maps.Size(size_x, size_y)); var marker; marker = new google.maps.Marker({ position: mapLocation, // 마커가 위치할 위도와 경도(변수) map: map, icon: image, // 마커로 사용할 이미지(변수) title: "${boardDTO.userId}(님) 의 거래 희망 위치" // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀 }); var content = "${boardDTO.userId} 님은 "+address+" 근처에서 거래를 희망합니다."; // 말풍선 안에 들어갈 내용 // 마커를 클릭했을 때의 이벤트. 말풍선 뿅~ var infowindow = new google.maps.InfoWindow({ content: content}); google.maps.event.addListener(marker, "click", function() { infowindow.open(map,marker); }); /* 단순한 마커로 default로 표시할 때 쓰는 마커 세팅 var marker = new google.maps.Marker({ position: uluru, map: map }); */ } </script> <!-- 아래는 서버로부터 지도를 로딩하기 위해 요청하는 경로 async는 비동기로 로딩하도록해 지도 로딩 중 다른 웹 부분들이 열릴 수 있도록하기 위함 key부분에는 자신의 키를 넣고, 로딩이 완료되면 callback에 지정한 함수를 수행하게 됨. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> <!-- End of GoogleMap API 연동(황영롱) -->