@luckylundyposted at 2021-12-21

googleマップがブラウザで表示できない

Q&A

JavaScript Rails GoogleMapsAPI

解決したいこと

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

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

ブラウザ上でgoogleマップが表示できません。

グーグルデベロッパーツールのコンソールで確認したところ、以下のエラーが出ていました。

該当するソースコード

microposts/new.html.erb

~~~~~~~(略)~~~~~~~
      <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" %>

application.html.erb

<!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>

googlemap.js

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();
    }
  });
}

自分で試したこと

① 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"

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

Are you sure you want to delete the question?