메뉴 건너뛰기

조회 수 4577 추천 수 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 스프링(spring) 메일 발송 :: mailSender 2016.08.18 14879
37 play framework + 이클립스 초간단 개발환경 구축법 2016.12.08 12384
36 쿠키와 세션을 이용한 자동 로그인 처리 file 2018.07.04 8970
35 루씬 기본적인 검색 엔진 - 샘플 예제 file 2016.12.08 7768
34 자바 스프링프레임워크 개발환경 설정하기-1편 file 2016.08.18 6839
33 자바 스프링프레임워크 개발환경 설정하기-2편 file 2016.08.18 6490
32 검색엔진 (2) - 라이브러리: Lucene, Solr, Elasticsearch 2016.12.08 6228
31 자바 스프링, spring AOP 구현 (xml 방식) file 2016.08.18 6200
30 검색엔진 (1) - 검색엔진의 이해 2016.12.08 6032
29 [펌]자바 Crawling(크로울링) 로그인 해 긁어오기 file 2018.07.04 5982
28 [패스트캣]1. 시작하기 - 설치 file 2016.12.08 5981
27 Nutch 0.9 를 이용하여 한글 검색하기 2016.12.08 5928
26 자바 스프링, spring AOP 구현 (xml 방식) file 2016.08.18 5892
25 스프링 2.5.2 설치및 HelloWorld 출력하기 file 2016.12.06 5836
24 스프링 AOP의 주요 용어 file 2016.08.18 5829
23 solr적용시 사용법 2016.12.08 5582
22 Spring Security Basic 인증 비활성화 설정 file 2016.08.18 5556
21 스프링과 안드로이드 연동4 : (JSON으로 가져오기) file 2018.07.04 5529
20 Spring 개발을 위한 Eclipse 개발 환경 구성하기 file 2016.12.06 5431
19 Spring Framework 개요 2016.12.08 5339
Board Pagination Prev 1 2 Next
/ 2

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved