메뉴 건너뛰기

조회 수 4713 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

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


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

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



List of Articles
번호 제목 날짜 조회 수
38 스프링, MySQL, MyBatis 연동 - 데이터 조회하기 file 2021.05.06 889
37 스프링, MySQL, MyBatis 연동 file 2021.05.06 189
36 Java was started but returned exit code=13 - 이클립스 실행시 에러 file 2021.03.31 253
35 스프링 프로젝트 생성 후 샘플 코드 한글 깨짐 현상 file 2021.03.31 256
34 쿠팡 api 프로젝트 / 적용 테스트 (스프링 부트 / 자바 ) file 2021.03.29 680
33 AJAX 통신시 컨트롤러에서 한글 문자열을 리턴해야하는 경우 인코딩 문제 처리 2018.07.04 2684
» 스프링에서 구글맵 연동하기 2018.07.04 4713
31 스프링과 안드로이드 연동1(Html 소스 가져오기) 2018.07.04 2750
30 스프링과 안드로이드 연동2 : 서버에서 안드로이드로 이미지 가져오기(다운) 2018.07.04 3422
29 스프링과 안드로이드 연동3 : ( 서버에서 XML로 반환해 가져오기 ) 2018.07.04 2966
28 스프링과 안드로이드 연동4 : (JSON으로 가져오기) file 2018.07.04 5618
27 스프링과 안드로이드 연동5 : (Javascript에서 Android 함수 호출하기) 2018.07.04 3476
26 JAVA Crawling(크로울링) 기본([펌]http://partnerjun.tistory.com/guestbook) file 2018.07.04 5210
25 [펌]자바 Crawling(크로울링) 로그인 해 긁어오기 file 2018.07.04 6120
24 [펌]자바 Crawling(크로울링) Ajax로 요청하는 것 긁어오기 file 2018.07.04 2980
23 쿠키와 세션을 이용한 자동 로그인 처리 file 2018.07.04 9089
22 스프링 외부 경로 폴더 지정하기 2018.07.04 4712
21 play framework + 이클립스 초간단 개발환경 구축법 2016.12.08 12631
20 루씬 기본적인 검색 엔진 - 샘플 예제 file 2016.12.08 7855
19 [패스트캣]1. 시작하기 - 설치 file 2016.12.08 6056
Board Pagination Prev 1 2 Next
/ 2

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved