Rails 5 - 谷歌地圖 - Javascript錯誤 - initMap不是一個函數 - 修復一個js問題創建另一個

Question

我一直在嘗試多年來弄清楚如何在我的Rails應用程序中使用谷歌地圖。我目前正在嘗試Rails 5.

我也一直想弄清楚如何讓我的JavaScript在生產環境中工作。

我對這些挑戰的最新嘗試在這production issue post和google maps post概述。

長codementor會話後，生產環境JavaScript的問題似乎已被移動解決：

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

從出head標籤body標籤的結束。

但是，在這樣做，谷歌地圖JavaScript現在不工作。它提供了一個錯誤，指出：

initMap is not a function 

我看到很多人提出這個問題，包括here。

我曾嘗試在這篇文章中，這是概括的解決方案來替換這個腳本：在我的地址視圖文件，這個腳本

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

：

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

的主要區別是去除「& callback = initMap」。這不會在控制檯檢查器中出現錯誤。但是，它也不顯示地圖。

我已通過修復生產問題創建了一個新問題。

任何人都可以看到我需要做什麼才能獲得谷歌地圖渲染（沒有打破生產環境JS）？

Answer 1

我設法得到這個上軌運行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"] 

然後一個js文件（map.coffee）我有以下內：

jQuery -> 

    window.initMap = -> 
    # your map code here 

Answer 2

我在滑軌5.這個工作，我想寄這使人們可以看到如何在價值觀傳遞給地圖，使您可以顯示在特定的地圖座標，例如。

下面是視圖的精簡版，其中包含腳本。 （我的下一個步驟將是可以拉出JS（腳本）代碼，並把它變成/app/assets/javascript。

我有一個對象@location將到latitude和longitude迴應。

在下面的觀點，我有一個div與id = #location-longitude（在HAML中，它的寫法與#location-longitude一樣）。我也有div與id = #location-latitude。我在javascript中使用這些div id，然後獲取該div內顯示的文本的值。您可以使用其他方式獲取值（如通過XML）。這是非常簡單的，讓您可以專注於獲得工作

調用谷歌地圖（需要注意的是，因爲HAML語法基於縮進，我不能很好地縮進的JavaScript。當我做，HAML東西抱怨。）

/ 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）回調工作窗口對象，所以我不得不把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; 
} 

希望這可以幫助別人解決這個問題。

編輯：

發佈後遇到了這個codepen片段：https://codepen.io/gabrieleromanato/pen/qEzKZY?editors=0110#0

我在Rails 5應用程序成功地測試了通過添加<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&v=3" %>