🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Q&A

解決済

1回答

1458閲覧

Rails You have included the Google Maps JavaScript API multiple times on this page.が解決できない

taixnihsi

総合スコア4

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

0グッド

0クリップ

投稿2020/11/25 02:14

編集2020/11/25 02:37

現在Railsアプリを作成中。その際googlemapを埋め込もうとして表示はできたのですが、以下のエラーが解決できません。
イメージ説明

調べると、APIのJavascriptの同じファイルを複数読み込んでいる時に発生したエラーメッセージ。
重複して読み込んでいる「https://maps.googleapis.com/maps/api/js」を削除することで解決するそうですが、そもそも一回しか読み込んでいないと思います。
Google MAP Javascript API 実装時に発生したエラーの対応方法

どなたかご教授いただけますでしょうか?

showhtml

1<div class="container"> 2 <div class="test"> 3 <p>お店: <%= @shop.name %></p> 4 <p>内容: <%= @shop.content %></p> 5 <p>ジャンル: <%= @shop.genre %></p> 6 <p>作成日: <%= @shop.created_at %></p> 7 <p>住所: <%= @shop.address %></p> 8 <p><span>名前: </span><%= @user.username %></p> 9 <div id="map"></div> 10 </div> 11 12 <%= link_to "一覧に戻る", shops_path %> 13</div> 14 15<style type="text/css"> 16 #map { 17 height: 200px; 18 width: 70%; 19 } 20</style> 21 22<script type="text/javascript"> 23 24 function initMap () { 25 let test = { 26 lat: <%= @shop.latitude %>, 27 lng: <%= @shop.longitude %> 28 } 29 30 const map = new google.maps.Map(document.getElementById('map'), { 31 zoom: 15, 32 center: test 33 }); 34 const transitLayer = new google.maps.TransitLayer(); 35 transitLayer.setMap(map); 36 37 const contentString = "住所:<%= @shop.address %>"; 38 const infowindow = new google.maps.InfoWindow({ 39 content: contentString 40 }); 41 42 const marker = new google.maps.Marker({ 43 position: test, 44 map: map, 45 title: contentString 46 }); 47 48 marker.addListener('click', function() { 49 infowindow.open(map, marker); 50 }); 51 } 52</script> 53<script async defer src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_API_KEY'] %>&callback=initMap"></script> 54

applicationjs

1// This file is automatically compiled by Webpack, along with any other files 2// present in this directory. You're encouraged to place your actual application logic in 3// a relevant structure within app/javascript and only use these pack files to reference 4// that code so it'll be compiled. 5 6require("@rails/ujs").start() 7require("turbolinks").start() 8require("@rails/activestorage").start() 9require("channels") 10require("jquery") 11 12// Uncomment to copy all static images under ../images to the output folder and reference 13// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 14// or the `imagePath` JavaScript helper below. 15// 16// const images = require.context('../images', true) 17// const imagePath = (name) => images(name, true) 18 19//= require jquery3 20//= require materialize 21//= require materialize-sprockets 22//= require turbolinks 23//= require_tree . 24import 'materialize-css/dist/js/materialize' 25 26

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/11/25 02:26

Turbolinksは使っていますか?
taixnihsi

2020/11/25 02:28

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> こちらのことでしょうか? こちら読み込んでおります。
taixnihsi

2020/11/25 02:29

maisumakun様ご返信ありがとうございます。 Turbolinksと何か関係がるのでしょうか?
maisumakun

2020/11/25 02:31

> こちらのことでしょうか? application.jsの中身も確認してください。
taixnihsi

2020/11/25 02:34

applicationjs記載いたしました。
guest

回答1

0

ベストアンサー

urbolinksと何か関係がるのでしょうか?

大ありです。Turbolinksがある状況で<body>の内側に<script>タグがあると、ページの読み込みのたびにその<script>を実行し、しかもページ遷移後も残り続けます

インラインで<script>を書くスタイルでコードを書きたいのであれば、Turbolinksは止めてください。

投稿2020/11/25 02:33

maisumakun

総合スコア145963

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taixnihsi

2020/11/25 02:35

そうなのですね。javascriptをわけて書いてみます。 ありがとうございます。
maisumakun

2020/11/25 02:37

全ページで参照して問題ないのであれば、maps.googleapis.comへの参照は<head>の中に書いておきましょう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問