Rails 5 -Google Maps -JavaScript错误 - Initmap不是一个函数 - 修复一个JS

Question

我多年来一直在尝试弄清楚如何在Rails应用中使用Google Maps。我目前正在尝试使用Rails 5。

我也一直在试图弄清楚如何使我的JavaScript在生产环境中工作。

我最近对这些挑战的尝试在此生产问题上概述了，该Google Maps Post。

在长时间的编码器会话后，生产环境JavaScript问题似乎已经通过移动解决了：

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

从头标签到身体标签的末端。

但是，在这样做的过程中，Google Maps JavaScript现在不起作用。它给出一个错误，上面说：

initMap is not a function

我已经看到许多其他人提出了这个问题，包括这里。

我尝试了这篇文章中概述的解决方案，即替换此脚本：

<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>

关键区别是删除"＆amp; callback = initmap"。这在控制台检查员中没有任何错误。但是，它也不显示地图。

我通过解决生产问题来创建一个新问题。

任何人都可以看到我需要做的事情才能获得Google Maps渲染（不打破生产环境JS）？

Answer 1

我已经设法使它在rails 5项目上使用以下内容（请注意，此slim语法）

= 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

我在Rails 5中有此功能。我想发布此功能，以便人们可以看到如何将值传递给地图，以便您可以在特定的坐标上显示地图。

这是视图的删除版本，其中包含脚本。（我的下一步将是将JS（脚本）代码删除并将其放入/app/assets/javascript。

我有一个对象@location，它将响应latitude和longitude。

在下面的视图中，我有一个带有id = #location-longitude的div（在HAML中，它以#location-longitude的形式编写）。我也有一个div，带有id = #location-latitude。我使用JavaScript中的那些DIV ID来获取该div中显示的文本的值。您可以使用其他获取值的方法（例如通过XML）。这真的很简单，因此您可以专注于呼叫Google Maps的工作

（请注意，由于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）回调在窗口对象上工作，因此我必须在此上下文中放置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;
}

希望这有助于其他人处理此问题。

编辑：

发布后，遇到了这个编码段：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" %>