使用環境 ruby '2.6.5' rails '6.0.3'
Ruby on Railsを用いてアプリケーションを作成しています。
該当ページ遷移時にGoogleMapが表示されている状態にしたいです。
現状は以下のとおりです。
・GoogleMapのAPIは取得済み
・該当ページで1度リロードするとGoogleMapが表示される(ページ遷移時はマップが表されない)
コードは以下のとおりです。
js
1function initMap(){ 2 const latlng = {lat: 35.383575, lng: 139.344170}; 3 let map = new google.maps.Map(document.getElementById('map'), { 4 center: latlng, 5 zoom: 13 6 }); 7} 8 9window.onload = function () { 10 initMap(); 11};
application.hrml.erb
<script async src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_API'] %>"></script>
調べているとscript
タグの最後にcallback=initMap
と記述をするとAPIが読み込まれた段階でinitMap()という関数が実行されることがわかりました。
そのため、window.onload
の処理を消してcallback=initMap
を追加をして実行をしてみたのですが地図が表示されずエラーinitMap is not a function
が表示されてしまいます。(<!DOCTYPE html>
がエラーの該当箇所となっています)
ファイルが読み込まれる順番が関係しているのでしょうか?
ビューファイルにjavascript
の処理を直接記述している記事が多く、ファイルを切り分けている例が見受けられず解決できない状況となっているため、アドバイスをいただきたいです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/10/13 01:57