Rails 5 - Google Maps - Javascript错误 - initMap不是一个函数 - 修复一个js问题会产生另一个问题 [英] Rails 5 - Google Maps - Javascript error - initMap is not a function - fixing one js issue creates another

问题描述

我多年来一直想弄清楚如何在我的Rails应用程序中使用Google地图。我正在尝试使用Rails 5。

我也试图弄清楚如何让我的javascript在生产环境中工作。

我在这些挑战中的最新尝试在生产问题发布和此谷歌地图发布。

经过长时间的codement或session，生产环境的javascript问题似乎已经通过移动来解决：

 <％= javascript_include_tag'application'，'data-turbolinks-track'：'reload'％> 
  

从头标记到身体标记的结尾。

然而，在这样做的时候，google maps javascript现在不起作用。它给出了一个错误，说：

  initMap不是函数
  

我见过很多其他人提出这个问题，包括这里。

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

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

在我的地址视图文件中使用此脚本：

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

关键区别在于删除了& callback = initMap。这不会在控制台检查器中出现错误。不过，它也不会显示地图。

我通过修复生产问题创建了一个新问题。

任何人都可以看到我需要做什么才能获得Google地图渲染（而不会破坏生产环境js）？

解决方案

b $ b

  = 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 =  - > 
＃您的地图代码
  

I have been trying for years to figure out how to use google maps in my Rails app. I am currently trying with Rails 5.

I have also been trying to figure out how to get my javascript to work in a production environment.

My most recent attempts at these challenges are outlined in this production issue post and this google maps post.

After a long codementor session, the production environment javascript problem seemed to have been solved by moving:

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

from out of the head tag to the end of the body tag.

However, in doing this, the google maps javascript now doesnt work. It gives an error that says:

initMap is not a function

I have seen many others raise this problem, including here.

I have tried the solution outlined in this post, which is to replace this script:

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

with this script in my address view file:

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

The key difference is the removal of "&callback=initMap". This gives no errors in the console inspector. However, it doesn't display a map either.

I have created a new problem by fixing the production issues.

Can anyone see what I need to do in order to get the google maps rendering (without breaking the production environment js)?

解决方案

I have managed to get this to work on a rails 5 project with the following in the head (note this it slim syntax)

= 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"] 

Then inside a js file (map.coffee) I have the following:

jQuery ->

  window.initMap = ->
    # your map code here

这篇关于Rails 5 - Google Maps - Javascript错误 - initMap不是一个函数 - 修复一个js问题会产生另一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！