google maps APIを使ってみよう

5375 ワード
googleapi Rails Rails テキストリンク

前回まで

https://qiita.com/mokku/items/c59944dcc3945423db9f
rails newとherokuでのデプロイまではこちらで済ませております。

準備

Gemをインストールする

Gemfileに追記
gem 'gmaps4rails'
インストール
bundle install

Google map API key　を取得する

公式の説明：
https://developers.google.com/maps/documentation/javascript/get-api-key

  • google cloud platformで新しいプロジェクトを登録
  • APIを有効にする（利用するAPIがわからない場合は一旦これ）
  • 認証情報を作成する
  • API keyが作成されるのでメモする（後で確認できます）
  • キーを制限/アプリケーションの制限でhttpリファラーを選択
  • ローカル（http://.localhost/）と本番のアドレスを追加

割り当ての確認

  • APIサービス/ダッシュボード/Maps JavaScript API/割り当て

以下の「無制限」が「１」の場合、課金設定を行う必要があります。
クレジットカードなどを登録するだけです。

view

公式：
https://developers.google.com/maps/documentation/javascript/tutorial

最低限これだけでGoogle mapは表示されます！

index.html.haml
<style>
#map {
  height: 400px;
  width: 600px;
}
</style>

<div id="map"></div>
<script>
  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=自分のAPIキー&callback=initMap"
type="text/javascript"></script>

参考

公式　https://github.com/apneadiving/Google-Maps-for-Rails

google API　使い方について丁寧に書かれているサイト
http://www.webdesignleaves.com/pr/plugins/googlemap_01.html

https://note.mu/daddy0055/n/nddbe8da38bbc
https://qiita.com/enzen/items/9a919a75ebf0a34e7b91