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

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

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

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 부분은 구글맵 컨테이너에 대한 스타일을 지정하는 부분입니다.

?

1 2 3 4 5 6 7 8 9 10

<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() 메서드로 콜백이 들어와 지도를 그려주게 됩니다.

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

<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 연동(황영롱) -->