RailsでGoogleMapを表示させる

　gem 'gmaps4rails'の使い方 の手順をまとめてみた。

やりたいことはこれ f:id:happy_teeth_ago:20180619174729p:plain

エラー cannot load such file -- coffee_script

公式サイト

github.com

いきなりエラー cannot load such file -- coffee_script

idがかぶるとありえない。だめ JavaScriptが意図しない動きになる。 原因 あちこちsubmitがある。 理由 画面が別れていてもどこの画面であっても問題ない。パーシャルになっていても同じ画面ならファイル違っていてもJavaScriptなので、submit取得できる。

住所表示ボタン

 <%input id="submit"class="btn btn-primary" type="button" value="住所をを表示">

formのsubmitは

  <%= form.submit %>　

これらは別物である。

気を取り直し、コントローラのソースを見る.

  def index
    @datperson2s = Datperson2.all
    @hash = Gmaps4rails.build_markers(@datperson2s) do |user, marker|
      marker.lat user.latitude
      marker.lng user.longitude
    end    
  end

はじめ理解できなかった。これRubyは引数の()を省略できる。

　marker.lat(user.latitude)

これと同じである。

marker.latは　関数のようである。 リファレンスのここでチェック。

Google-Maps-for-Rails/markers_builder.rb at master · apneadiving/Google-Maps-for-Rails · GitHub

51行目付近にある。

def lat(float)
@hash[:lat] = float
end

セッタのようになっている git で公開しているものはソースで確認すること！

HTMLに組み込む時、ERBではコピペで組み込める。slimを使う意味がわからない。HTMLからすべて作る場合はいいかもしれない。

リファレンス確認しながら進める。

1）gemはok

2)HTMLも書いた

見つからなければエラーになるので大丈夫

3)JavaScriptはapplication.html.rbに記載した

もともとあったのがおかしかった 文字がエスケープされていた

4) Javascript source code

アセットパイプラインに入れないといけないので sprocketというjemに書き出される

アセットパイプラインとは

JavaScriptやCSSを最小化して連結するフレームワーク gem 'sass-rails' gem 'uglifier' gem 'coffee-rails'

これらのgemを利用する よってコーヒー使わなくてもコヒーを削除してはいけない ただコーヒーファイルをjsに変更するだけでよい。

ウエブページをレンダリングする際に、リクエストをへらすことができる

If you don't have asset pipeline, you'll need to import the js OR coffee files: rails g gmaps4rails:copy_js

rails g gmaps4rails:copy_coffee アセットが無いならこれを使いなさい あるからいらない

5) Javascript code:

スクリプトタグの中に書いた グーグルはコメントした

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers([
    {
      "lat": 0,
      "lng": 0,
      "picture": {
        "url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
        "width":  32,
        "height": 32
      },
      "infowindow": "hello!"
    }
  ]);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

6) Add options: グーグルのオプションを利用したいときはこのようにする

Generating JSON これはコントローラに書いている

@users = User.all
@hash = Gmaps4rails.build_markers(@users) do |user, marker|
  marker.lat user.latitude
  marker.lng user.longitude
end

ここでビューに渡している In your view:

これを利用して、上記を書き換えた。 これがコントローラーからviewへ値を出力しているところ。

このアプリでは、MAPをいろんなところから読み込むので ハッシュに入っていないと表示できない indexはいい。もう詰め込んであるのを表示するだけなので。 editでは,addmarkerを呼んであげないといけない。グーグルの関数で動的にやっていかないといけない。

エラーfirstchildがnill 一度railsのサーバーを再起動してみる。これは イニシャライズで読み込まれたり、アセットパイプラインを変更した場合エラーが治る可能性があるためである。 ここを見ると、DOM構築後に読み出さないといけない。読み込みのタイミングだけの話 https://github.com/apneadiving/Google-Maps-for-Rails/issues/534

onloadの書き方。ここをみて修正 https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload

普通はクリックするとページが切り替わる。 ターボリンク使うと中身をAjaxが全部書き換えている 実際にはページ遷移していないのでページ書き換わらない。 そのタイミングでJavaScriptを走らせる

document.addEventListener('turbolinks:load', function() {
});

このgemは一体なんなのか？railsのコントローラとviewを簡単につなげてくれるgemである。 editではjavascriptで動的に追加しないといけない

フロントでJavaScriptで詰め込まないといけない。取得したものをinnerHTMLで入力か？ 位置情報の修正はjavascriptで行うしか無い。 以上！