

### 課題

railsアプリでgoogleマップを実装中ですが、ブラウザに表示されません。  
なんとかして表示できるようにしたいです。

### 発生している問題・エラー

ブラウザ上でgoogleマップが表示できません。  
![](https://user-
images.githubusercontent.com/69103382/146885757-de4b9733-3405-4280-ad90-fd8cdc4d965d.png)  
グーグルデベロッパーツールのコンソールで確認したところ、以下のエラーが出ていました。  
![](https://user-
images.githubusercontent.com/69103382/146884894-c8563783-4a93-4003-9eb0-56a5258483af.jpg)

### ソースコード

[code]

    ~~~~~~~(略)~~~~~~~
          <div id="map" style="height: 400px; width: 100%;"></div><%# ここにgoogleマップを表示 %>
          <%= f.hidden_field :latitude %>
          <%= f.hidden_field :longitude %>
    
          <div class="text-center">
            <%= f.submit "投稿", class: "btn btn-primary" %>
          </div>
        <% end %>
      </div>
    </div>
    
    <%= javascript_pack_tag "googlemap" %>
    
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Nanitabeta</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>
    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        
    
        <%= include_gon %>
        <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
      </head>
    
      <body>
        <%= render 'layouts/header' %>
        <%= render "layouts/alert" %>
    
        <%= yield %> <%# 他のページを表示する %>
        <%= render "layouts/footer" %>
        
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
        
        <%# googleマップ用のスクリプト %>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_KEY'] %>&callback=initMap" async defer></script> 
        <script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
        <script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>
    
        <%# gem "gmaps4rails"用のスクリプト %>
        <script src='//cdn.jsdelivr.net/gmaps4rails/2.1.2/gmaps4rails.js'> </script>
        <script src='//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js'> </script>
      </body>
    </html>
    
[/code]

[code]

    var marker
    var map_lat
    var map_lng
    var map_result
    let myLatLng
    let map
    let geocoder
    
    function initMap(){
      geocoder = new google.maps.Geocoder()
      if(document.getElementById('map')){ //新規投稿で表示する地図
        myLatLng = {lat: 35.676192, lng: 139.650311}
        map_lat = document.getElementById('micropost_latitude')
        map_lng = document.getElementById('micropost_longitude')
    
        map = new google.maps.Map(document.getElementById('map'),{
          center: myLatLng,
          zoom: 15,
        });
        marker = new google.maps.Marker();
    
    google.maps.event.addListener(map, 'click', mylistener); //地図クリック時の処理実行
    
    function mylistener(event){ //地図クリック時の処理内容
      marker.setPosition(new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()));
      marker.setMap(map);
      console.log(event.latLng.lat(), event.latLng.lng());
      map_lat.value = event.latLng.lat(); //クリックした場所の緯度をデータベース保存用の値にする
      map_lng.value = event.latLng.lng(); //クリックした場所の経度をデータベース保存用の値にする
    }
    
      }else{ //投稿詳細で表示する地図
        myLatLng = {lat: gon.lat, lng: gon.lng} //データベースの緯度・経度
        map = new google.maps.Map(document.getElementById('show_map'),{
          center: myLatLng,
          zoom: 15,
        });
        marker = new google.maps.Marker({ //マーカーを表示するのみ
          position: myLatLng, //データベースの緯度・経度
          map: map
        });
      }
    }
    
    function deleteMarker(){ //マーカー削除
      marker.setMap(null);
      map_lat.value = "";
      map_lng.value = "";
    }
    
    function codeAddress(){
      geocoder = new google.maps.Geocoder()
      let inputAddress = document.getElementById('address').value;
      geocoder.geocode({
        'address': inputAddress,
        'region': 'jp'
      }, function(results, status){
        if (status == 'OK'){
          map.setCenter(results[0].geometry.location); //クリックした場所を中心にする
          map_result = results[0].geometry.location;
          map_lat.value = map_result.lat();
          map_lng.value = map_result.lng();
          marker.setPosition(new google.maps.LatLng(map_result.lat(), map_result.lng()));
          marker.setMap(map);
          console.log(map_lat.value, map_lng.value);
        }else{
          alert('該当する結果がありませんでした');
          initMap();
        }
      });
    }
    
[/code]

### 試したこと

① googleAPIの設定に不備がないか  
→APIの有効・支払いの紐付け・APIキーの制限・HTTPリファラーなどは確認済み

② microposts/new.html.erbのマップを表示させる部分でstyleの記述が抜けていないか  
→確認済み

③ .envファイルの環境変数が出力されていないのでgoogleマップのスクリプトが働いていないのでは？  
→確認済み

> $ bin/rails c  
>  Loading development environment (Rails 6.0.4.1)  
>  [1] pry(main)> ENV['GOOGLE_MAP_KEY']  
>  => "AIzaSyDXXXXXXXXXX"  
>  [2] pry(main)> ENV["GOOGLE_MAP_KEY"]  
>  => "AIzaSyDXXXXXXXXXX"

おそらくスクリプトの順番でエラーが起きているのではないかと予想しているのですが、検索しても情報が少なく、色々入れ替えてみても何も変わらないので困っています。  
エラーの原因をわかる方がいらっしゃいましたら、どうかご助力頂けないでしょうか？  
どうぞよろしくお願いいたします。


CC BY-SA 4.0
2021-12-22T01:39:51.687
85264
2021-12-24T02:45:07.003
2021-12-22T03:00:31.380
49480
49480
question
javascript ruby-on-rails google-maps
railsアプリで実装中のgoogleマップをブラウザで表示させたい


**解決しました**

頂いたアドバイスや検索した記事を参考にしたところ、なんとかgoogleマップを表示することに成功しました！  
まだコンソールにエラーは出ているのですが、それはまた別で質問したいと思います！  
ありがとうございました！

【やったこと】  
・jsファイルの記述をすべてビューファイルにコピーして動作を確かめる  
・googleマップ用のスクリプトもビューファイルに移動。コピーしたjsの記述より下に設置  
・require("turbolinks").start()をコメントアウトする

![94a6081276aff29396ae520a228fd38b.png](https://qiita-image-store.s3.ap-
northeast-1.amazonaws.com/0/932183/dbc03448-8754-e977-25c8-d3912f1f9755.png)


CC BY-SA 4.0
2021-12-24T02:45:07.003
85314
2021-12-24T02:45:07.003
49480
85264
answer