Home>

Currently creating a Rails app. At that time, I tried to embed googlemap and it was displayed, but the following error cannot be resolved.

When I looked it up, the error message that occurred when reading the same file of Javascript of API multiple times.
It seems that it can be solved by deleting "https://maps.googleapis.com/maps/api/js" that is loaded twice, but I think that it is loaded only once in the first place.
How to deal with errors that occur when implementing the Google MAP Javascript API

Can anyone teach me?


  
  <p>Shop:<% = @ shop.name%></p>
  <p>Content:<% = @ shop.content%></p>
  <p>Genre:<% = @ shop.genre%></p>
  <p>Created:<% = @ shop.created_at%></p>
  <p>Address:<% = @ shop.address%></p>
  <p><span>Name:</span><% = @ user.username%></p>
     
  
<% = link_to "Return to list", shops_path%>

<style type = "text/css">
  #map {
    height: 200px;
    width: 70%;
  }
</style>
<script type = "text/javascript">
  function initMap () {
    let test = {
      lat:<% = @ shop.latitude%>,
      lng:<% = @ shop.longitude%>
      }
    const map = new google.maps.Map (document.getElementById ('map'), {
      zoom: 15, 15,
      center: test
    });
    const transitLayer = new google.maps.TransitLayer ();
    transitLayer.setMap (map);
    const contentString = "Address:<% = @ shop.address%>";
    const infowindow = new google.maps.InfoWindow ({{
      content: contentString
    });
    const marker = new google.maps.Marker ({{
      position: test,
      map: map,
      title: contentString
    });
    marker.addListener ('click', function () {
      infowindow.open (map, marker);
    });
  }
</script>
<script async defer src = "https://maps.googleapis.com/maps/api/js? key =<% = ENV ['GOOGLE_MAP_API_KEY']%>&callback = initMap"></script>
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require ("@ rails/ujs"). start ()
require ("turbolinks"). start ()
require ("@ rails/activestorage"). start ()
require ("channels")
require ("jquery")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g<% = image_pack_tag'rails.png'%>)
// or the `imagePath` JavaScript helper below.
// //
// const images = require.context ('../ images', true)
// const imagePath = (name) =>images (name, true)
// = require jquery3
// = require materialize
// = require materialize-sprockets
// = require turbolinks
// = require_tree.
import'materialize-css/dist/js/materialize'
  • Answer # 1

    Does it have anything to do with urbolinks?

    There is a lot. In the presence of TurbolinksInside