演習課題「地図を表示しよう」
右の環境には、Railsで「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られています。また、この2つの掲示板は、すでに関連付けてあります。
エディタを使って、app/views/cats/show.html.erbを修正して、ネコの居場所(address)をGoogleマップで表示できるようにしてください。
なお、Googleマップに必要なライブラリや設定は、すでに記述してあります。
rails serverを起動した上で、採点して、すべてのジャッジに正解すれば、演習課題クリアです！
＃05:Googleマップを組み込む
ここでは、ランチマップに地図を追加します。そのために、このRailsアプリケーションにGoogleマップを組み込みます。
APIとは、Application Programming Interfaceの略で、プログラムから別のプログラムの機能を呼び出すために用意された命令や関数のこと。
- Google Maps API | Google Developers
https://developers.google.com/maps/
- Google Maps JavaScript API スタートガイド | Google Developers
https://developers.google.com/maps/documentation/javascript/tutorial
- Google Maps Embed APIの使い方まとめ！カスタム地図を埋め込もう
https://syncer.jp/google-maps-embed-api-matome
- Google Maps Embed API
https://developers.google.com/maps/documentation/embed/guide
今回は以下のpaizaラーニング用のAPIキーを使ってください。
AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU
自分でウェブサービスを公開する場合には、以下の手順を参考に取得してください。
1. Google Developers Consoleにアクセスする
Google Developers Console
https://console.developers.google.com/
2. プロジェクトを作成を選択
3. Google APIが表示されたら、Google Maps APIから「Google Maps Embed API」を選択
4. 「有効にする」をクリック
5. 「認証情報を作成」をクリックして、「必要な認証情報」ボタンをクリック
6. 表示されたAPIキーを記録する
※特定のWebサービスだけから利用できるよう、「API利用制限」を設定することをお勧めします。
※この手順や利用範囲はGoogle側で変更される場合があります。
app/views/shops/show.html.erb<%= content_tag(:iframe, 'map', src:'https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&q=' + @shop.address, width: 800, height: 400, frameborder: 0) %>
<br>