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
위 처럼 잘 나옵니다.
코드 샘플

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

Advertisements

처음 워드프레스를 시작하며..

저는 원래 블로그를 하지 않았습니다. 이유는 대부분의 사람들이 블로그를 쓰지 않는 이유와 마찬가지로, 귀찮아서입니다. 뭐, 글 쓰는 것에 소질이 없기도 하고요. 그런데 개발자로 입문하고, 구글링의 힘을 빌려 개발 공부를 하면서 여러 블로그 포스팅을 보다보니, 질 좋은 내용을 가진 블로그라는 것의 파급력이 상당하다는 생각이 들었습니다.

그래서 저도 이참에 저의 기억을 정리하고, 저와 비슷한 길을 걷게될 분들을 위해서 새롭게 블로그를 시작해보려고 합니다. 또한, 대부분의 자료들이 영어로 되어 있어서 고통받는 분들이 많으실텐데, 조금이나마 그 고민을 덜어드리고자 합니다.

  • 어떤 내용이 담기는 블로그인가요? – 저는 처음 C언어를 접한지는 8개월, 웹 프론트엔드 분야를 접한 지는 3개월밖에 되지 않았습니다.(15년 10월 기준) 그래서 처음 비전공자로 웹프로그래밍에 입문하는 분들에게 도움이 되는 자료들을 하나씩 올려보려고 합니다. 또한 제가 진행하고 있는 프로젝트에 쓰인 여러 가지 코딩 방법들을 써보려고 합니다.
  • 어떤 언어, 프레임워크를 사용하나요? – 제가 아는 웹 프레임워크는 rails입니다. 그래서 rails를 기본 프레임워크로 사용하고, ruby, javascript, jQuery를 사용합니다. 추후에 angularJS같은 프레임워크를 사용하게 된다면, 그에 따른 포스팅도 해보려고 합니다.
  • 하고 싶은 말? – 뭔가 옛날 싸이월드 스무고개 느낌이 드는 듯한 전개이긴 한데.. 포스팅을 기다리지는 마시길 바랍니다 ㅋㅋ 처음하는 거라 자주 할 지 저도 의문입니다