Rails 5 - Google Maps - Javascriptエラー - initMapは関数の修正ではなく、別のものを作成する

Question

私はRailsアプリケーションでGoogleマップを使う方法を長年試してきました。私は現在、Rails 5で試しています。

また、私は実稼働環境でJavascriptを動作させる方法を見つけようとしています。

これらの挑戦に関する私の最近の試みは、production issue postとこのgoogle maps postに概説されています。長いcodementorセッションの後

、問題が移動することで解決されているように見えたjavascriptの本番環境：bodyタグの終わりにheadタグのうちから

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 

。

しかし、これで、Googleマップのjavascriptは現在動作しません。私は多くの人がhereを含め、この問題を提起見てきました

initMap is not a function 

：それは言うエラーが発生します。

私はこのスクリプトを交換することで、この記事で概説したソリューション、試してみました：重要な違​​いが除去され

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>" async defer></script> 

：私のアドレスビューファイルで、このスクリプトで

<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV["GOOGLE_MAPS_API_KEY"] %>&callback=initMap" 
    async defer></script> --> 

を"& callback = initMap"のいずれかです。これにより、コンソールインスペクタでエラーは発生しません。ただし、マップは表示されません。

私は生産上の問題を修正して新しい問題を作成しました。

私はGoogle Mapsレンダリング（プロダクション環境jsを壊すことなく）を得るために何が必要なのか誰にも見えますか？

私はその後のjsファイル（ map.coffee）の内側に、私は次のことを持っている（これもスリムな構文に注意してください）これは頭の中で次のようにレール5のプロジェクトに動作させるために

= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' 
script[async defer src="https://maps.googleapis.com/maps/api/js?key=#{ENV['GOOGLE_MAP_API']}&callback=initMap"] 

を管理している

Answer 1

：

jQuery -> 

    window.initMap = -> 
    # your map code here 

Answer 2

は、私は人々があなたが例えば、特定の座標で地図を表示できるように、マップに値を渡す方法を見ることができますので、私はこれを投稿したかったのRails 5.でこの作業を持っています。

ここには、スクリプトを含む、ビューを削除したバージョンがあります。 （私の次のステップはアウトJS（スクリプト）コードを引っ張ると/app/assets/javascriptにそれを置くことになります。

私はlatitudeとlongitudeに対応するオブジェクト@locationを持っている。

以下のビューで、私が持っていますdivとid = #location-longitude（HAMLでは#location-longitudeと書かれています）。divとid = #location-latitudeもあります。私はjavascriptでそれらのdiv IDを使用して、そのdiv内に表示されるテキストの値を取得します。値を取得する他の方法（XMLなど）を使用することができます。これは本当に簡単なので、Googleマップの呼び出しを呼び出すことに集中することができます

（HAMLの構文はインデントベースであるため、JavaScriptをはっきりとインデントできませんでした。

/ page title 
%h1 Location with Dynamic Map 

%h3 Coordinates: 

/this div id is important. The javascipt below looks for it and gets the inner value (= the value of @location.latitude) 
#location-latitude 
    #{@location.latitude} 

/this div id is also used by the javascript below 
#location-longitude 
    #{@location.longitude} 


%h3 Dynamic Google Map: 

/this div id is where the javascript below will put the map 
#map 


    %script{ type: 'text/javascript'} 
    var map; 
    function initMap() { 

    // assume we have a div with id 'location-latitude' that surrounds text that is the latitude 
    var lat_value = Number(document.getElementById('location-latitude').childNodes[0].nodeValue); 

    // assume we have a div with id 'location-longitude' that surrounds text that is the longitude 
    var long_value = Number(document.getElementById('location-longitude').childNodes[0].nodeValue); 

    var coordinates = {lat: lat_value, lng: long_value}; 

    map = new google.maps.Map(document.getElementById('map'), { 
    center: coordinates, 
    zoom: 11 
    }); 

    // now put a marker on the map, using the coordinates 
    var marker = new google.maps.Marker({ 
    position: coordinates, 
    map: map 
    }); 
    } 

    %script{ defer: 'async', src:"https://maps.googleapis.com/maps/api/js?key=#{YOUR_GOOGLE_API_KEY}&callback=initMap"} 

Answer 3

私はRailsの5アプリでjQueryのを使用してこの問題に遭遇してきました。私自身で1時間以上それを把握しようとした後、私はそれを打つと、他の人によって働いていることが確認されているいくつかの抜粋を試しましたが、私は複製できませんでした。しかし、数百万円の猿の力を具現化して、私は実用的な解決策を達成しました。

1）コールバックはwindowオブジェクト上で動作しますので、私は、この文脈でinitMapを（）を配置しなければならなかったとしませ$(document).ready...

2）私は<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&v=3&callback=initMap", async: true, defer: true %>

を含まにマップを使用していますページ内

私の見方は次のようになります：

<div id="map_container"> 
    <div id="map"> 
    </div> 

    <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&v=3&callback=initMap", async: true, defer: true %> 
    </div> 
</div> 

3）私にとって最大の手間は、ビューでした。高さと幅をピクセル単位で表示せずにレンダリングすることはできませんでした。他の提案を試行錯誤した後、私はvhを使ってつまずいた。

#map_container { 
    width: 100%; 
    height: 100%; 
} 

#map { 
    height: 100vh; 
} 

これは他の人がこれに対処するのに役立ちます。

EDIT：投稿後

このcodepenスニペットに出くわした： - あなたのために働いていたものを共有するためのおかげで非常に多くのhttps://codepen.io/gabrieleromanato/pen/qEzKZY?editors=0110#0

私は<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&v=3" %>