rails로 google map 활용하기 1

지도 서비스는 많은 웹서비스 중에서 사람들에게 많은 정보를 제공해주는 서비스 중 하나입니다. 지도 서비스로는 위치 찾기, 길찾기, 로드뷰 등 많은 것들을 할 수 있는데요. 이번 포스팅에서는 google map api를 활용해서 여러가지 지도서비스를 만드는 작업을 해보겠습니다.

포스팅 순서는 다음과 같습니다.
1. 구글맵 프로젝트에 띄우기
2. 구글맵에 다양한 표시 그려보기
3. 지도 검색, 길찾기 등 서비스 구현해보기

먼저 혹시나 하는 마음에 API라는 개념을 모르시는 분들이 있을 것 같아 간단히 API에 대해 설명을 드리자면,

API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.’ 라고 위키에 설명이 되어있습니다.

기업이나 기관에서 특정 기능을 사용할 수 있도록 제공하는 라이브러리 개념정도라고 보시면 됩니다. 대표적인 예로 구글맵, 구글애널리스틱스, 페이스북 공유, 페이스북 로그인, 트위터 로그인 등등 developer.”특정 기업이름”.com에 가보시면 많이 찾아보실 수 있습니다.

캡처
구글 맵도 이러한 api를 제공하는 서비스입니다. 그래서 아래 링크로 가보시면
구글맵 자바스크립트 api사이트
구글맵을 사용할 수 있게 해주는 여러가지 사용법, 예제들이 있습니다. 설명이 굉장히 친절하게 되어 있는데, 전부 영어라 처음에 어떻게 해야할지 모르겠는 분들이 이 포스팅을 보시면 좋을 것 같습니다.

참고로 저는 여러가지 IDE 중에서 Cloud9이란 것을 사용합니다.


Cloud9 바로가기
꼭 이걸 쓰라는 것은 아니지만, 별다른 환경설정 없이 레일즈를 바로 웹에서 사용할 수 있어서 좋습니다.

그럼 시작하겠습니다.
다들 아시는
rails new 'gmap'
으로 시작합니다.(c9에서는 workspace name을 설정하면 됩니다.)
별다른 gem은 쓰지 않기 때문에
bundle install
해줍니다.
다음으로 컨트롤러와 뷰를 빠르게 셋팅하기 위해서
rails g controller home index
를 입력합니다. 이렇게 하면 home controller와 index 뷰, 액션이 함께 생성됩니다. 물론 route셋팅도 한꺼번에 됩니다.
다 되었으면,
rails s
로 페이지 확인을 합니다.
캡처

여기까지는 간단한 셋팅 작업이고, 이제 본격적으로 구글맵을 페이지에 로딩해보겠습니다.
기존의 /home/index의 내용은 지우고
google developer javascript api페이지에 가셔서 GET A KEY를 누르면,
GOOGL
위와 같이 뜨고 해당 설명을 따라서 하면 됩니다.

continue 하시고, ‘계속’을 누르면
g2
다음과 같이 뜹니다. example.com이라고 되어 있는 입력란에 자신의 프로젝트가 돌아가는 주소를 적어주면 됩니다.( ex: gmap-hcn1519.c9.io/, 52.69.36.177:3000 등)
추가 되고 생성을 누르면1353
다음과 같이 api key가 생성됩니다. 이건 따로 저장해두시고, 다시 구글맵 자바스크립트 api 처음 화면으로 돌아갑니다.

거기서 ‘안내’를 누르면 getting started가 뜹니다.
43524
빠밤~ 거의 다왔습니다~

이제 스크롤을 조금 내리면 hello world 코드가 하나 나오는데, 그걸 복사해서 /home/index.html.erb에 붙여넣기 합니다.

<!DOCTYPE html>
<html>
  <head>


<style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>


  </head>
  <body>


<div id="map"></div>


    <script type="text/javascript">

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

그리고 아까 준비해놓은 api key를 맨 마지막의 스크립트 코드의 YOUR_API_KEY를 지우고 붙여넣습니다.
이제 다시 프로젝트를 돌려보시면
SYD
진짜 빠밤! 구글맵이 떴네요.

근데 왠 시드니?하실 수 있는데요. 위의 코드에서 처음 지도 로딩시 지도 중앙에 오는 부분을 위도, 경도로 설정할 수 있습니다.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

바로 위의 부분인데요. center 속성의 경우 lat, lng를 설정할 수 있는데, 각각 위도 경도를 의미합니다. 한국의 경우 위도 37, 경도 126 수준에 위치하고 있습니다. 그래서 다음 위도 경도를 저는

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.555130, lng: 126.936837},
    zoom: 16
  });
}

신촌역으로 설정해보았습니다. zoom의 경우에는 확대 정도를 의미하는데요, 정수로만 설정해야하고, 8~20정도로 설정이 가능합니다. 클 수록 확대가 많이 됩니다. 그래서 다시 지도를 로딩해보면
last
위 처럼 잘 나옵니다.
코드 샘플

첫 포스팅이라 부족한 부분도 많은데 앞으로 보완해나가겠습니다~

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중