現在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
回答1件
あなたの回答
tips
プレビュー