google maps APIを使ってみよう

前回まで

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