Ruby on Rails

Google Mapを表示させよう!

Google Map API Google-Maps-for-Rails Githubのreadmeを見て実装する方法

事前準備


はじめに


この問題は、gemを使用したGoogle Mapの使用方法を学習することが目的です。
イベント開催する時など、サイトにGoogle Mapが載せられていると親切ですよね。


今回のポイントは、GithubのREADMEを見ながら実装することです。
gemには、そのgemの使い方を示した説明書があります。それがREADMEです。


今回使用するgemは「Google-Maps-for-Rails」というgemです。
以下のページにREADMEが書かれています。
Google-Maps-for-Rails


このページを参照しながら実装していきましょう。


事前準備


問題に入る前に以下の手順を行ってアプリケーションを作成しましょう。


Railsプロジェクト作成


ターミナルにて


$ rails new GoogleMapSample -d mysql
$ cd GoogleMapSample

gemfileを編集


  gem 'mysql2', '0.3.20'

ターミナルにて


$ bundle install
$ rake db:create
$ rails g controller items index

routes.rb
root 'items#index'

Google API Keyの取得


Google Map API を使用するにには、アクセスキーを取得する必要があります。
以下のページにアクセスし、キーを取得しましょう。


Google Map API


1) ウェブを選択
ALTを入力してください


2) 「キーを取得」をクリック
ALTを入力してください


3) 新しいプロジェクトを作成
ALTを入力してください


4) プロジェクト名設定
ALTを入力してください


5) アクセスキー取得
ALTを入力してください


取得したキーは後ほど使用するのでメモしておきましょう。

問題: 1


READMEを見ながらGoogle Mapを表示させなさい


条件


  • TECH::CAMP渋谷オフィスにピンを立てる(緯度: 35.658689, 経度: 139.697798)
  • ピンをクリックした時に「テックキャンプ渋谷オフィス」と吹き出し説明を表示させる
  • 以下の画像のような縮尺にする

ALTを入力してください


ヒント


実装手順


1) Gem追加
2) ビューに必要なHTMLを記述
3-1) application.html.erbに必要なscriptタグを追加
3-2) underscore.js作成
4) application.jsに必要な記述を追加
5) マップを表示させる記述を追加
6) 縮尺は handler.getMap().setZoom(16);を使用