Rails 5 – 谷歌地图 – Javascript错误 – initMap不是一个function – 修复一个js问题创建另一个
我多年来一直试图弄清楚如何在我的Rails应用程序中使用谷歌地图。 我目前正在尝试使用Rails 5。
我一直在试图弄清楚如何让我的javascript在生产环境中工作。
我在这个生产问题post和谷歌地图post中概述了我最近对这些挑战的尝试。
在长代码会话之后，生产环境javascript问题似乎已通过移动解决：
从头标签到身体标签的末尾。
但是，在这样做，谷歌地图javascript现在不起作用。 它给出了一个错误：
initMap is not a function
我见过很多其他人提出这个问题，包括这里 。
我已经尝试了这篇文章中概述的解决方案，即替换此脚本：
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async defer> -->
在我的地址视图文件中使用此脚本：
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=" async defer>
关键的区别是删除了“＆callback = initMap”。 这在控制台检查器中没有出现任何错误。 但是，它也不显示地图。
我通过修复生产问题创建了一个新问题。
任何人都可以看到我需要做什么才能获得谷歌地图渲染（不破坏生产环境js）？
我已经设法让这个工作在rails 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
我在Rails 5中使用它。我想发布这个，以便人们可以看到如何将值传递给地图，以便您可以在特定坐标处显示地图，例如。
这是视图的精简版本，其中包含脚本。 （我的下一步是将js（脚本）代码拉出来并将其放入/app/assets/javascript 。
我有一个对象@location将响应latitude和longitude 。
在下面的视图中，我有一个id = #location-longitude的div （在HAML中，它的编写方式为#location-longitude ）。 我也有一个id = #location-latitude的div 。 我在javascript中使用这些div id然后获取在该div中显示的文本的值。 您可以使用其他方式获取值（例如通过XML）。 这非常简单，因此您可以专注于调用Google地图
（请注意，因为HAML语法是基于indention的，所以我不能很好地缩进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"}
我刚刚在Rails 5应用程序中使用jQuery遇到了这个问题。 在我试图自己计算了一个多小时后，我点击了SO并尝试了一些被其他人确认工作的片段，但我无法复制。 然而，体现了几百万只猴子打字的力量，我设法实现了一个有效的解决方案。
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 %>
所以我的观点看起来像这样：
<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&v=3&callback=initMap", async: true, defer: true %>
3）对我来说最大的麻烦就是观点。 如果没有我的高度和宽度以像素为单位，我无法渲染它。 经过试验和错误修改其他建议，我偶然发现使用vh 。
#map_container { width: 100%; height: 100%; } #map { height: 100vh; }
希望这有助于其他人处理这个问题。
编辑：
发布后发现这个codepen片段： https ：//codepen.io/gabrieleromanato/pen/qEzKZY ？ edit = 0110＃0
我通过添加<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&v=3" %>在Rails 5应用中成功测试了它