railsでGoogle Mapを表示させたい

Question

Ruby on RailsでGoogle Mapを表示させたいのですが、Mapの画像は表示されるものの住所位置が表示されずに困っています。
コンソールでは下記のエラーがありました。

Uncaught ReferenceError: google is not defined
at eval (eval at <anonymous> (infobox_packed.js:1), <anonymous>:1:1066)
at infobox_packed.js:1
(anonymous) @ VM469:1
(anonymous) @ infobox_packed.js:1
js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:98 Uncaught mc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new mc (https://maps.googleapis.com/m…-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:135:73"}message: "initMap is not a function"name: "InvalidValueError"stack: "Error↵ at new mc (https://maps.googleapis.com/maps/api/js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:47:499)↵ at Object._.nc (https://maps.googleapis.com/maps/api/js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:48:96)↵ at Yg (https://maps.googleapis.com/maps/api/js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:98:420)↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:135:58↵ at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:21:5)↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:134:20↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:135:73"__proto__: Error
Yg @ js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:98
(anonymous) @ js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:135
google.maps.Load @ js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:21
(anonymous) @ js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:134
(anonymous) @ js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:135

すみませんが、お助けくださいませ。。

：追記

失礼しました。コードを書いておりませんでした。

ビュー

      <div>
        <div id="map" style='width: 100%; height: 450px;'></div>
      </div>

      <script type="text/javascript">
          handler = Gmaps.build('Google');
          handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
            markers = handler.addMarkers(<%=raw @hash.to_json %>);
            handler.bounds.extendWith(markers);
            handler.fitMapToBounds();
          });
      </script>

コントローラー（controllers/map-controller.rb）

class MapController < ApplicationController
  def index
    @hash = Gmaps4rails.build_markers(@restaurants) do |restaurant, marker|
      marker.lat restaurant.latitude
      marker.lng restaurant.longitude
      marker.infowindow space.mapdescription
      marker.json({title: restaurant.maptitle})
    end
  end
end

モデル（restarurant.rb）

class Restaurant < ApplicationRecord
  geocoded_by :mapaddress
  after_validation :geocode
end

すみませんが、どうぞよろしくお願いいたします。

Answer 1

埋め込んだコードを乗せてもらっていいですか？

Comments

[yamady]

コメントありがとうございます。
コードを追記させていただきました。
どうぞよろしくお願いしますm(_ _)m

[hiyashikyuri]

コードありがとうございます！
エラーの最初のとこに
"Uncaught ReferenceError: google is not defined "と書いてあるので、おそらくgoogle mapが生成されていないのだと思います

google map apiを利用するために以下のコードはどこかに入れてありますか？ないなら入れて試してみてください！
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

こちらが記事のurlです
http://stackoverflow.com/questions/12500654/uncaught-referenceerror-google-is-not-defined

[yamady]

ごめんなさい、通知に気づかず、返信が遅れてしまいました。
ありがとうございます。！

いただいたコードをビューに入れてみたのですが、まだできてないみたいです。。

Uncaught ReferenceError: google is not defined
at eval (eval at <anonymous> (infobox_packed.js:1), <anonymous>:1:1066)
at infobox_packed.js:1
maps.googleapis.com/maps/api/js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:98 Uncaught mc
jquery-1.8.3.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
js:96 You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
$g @ js:96
album_01.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-1.8.3.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
maps.googleapis.com/maps-api-v3/api/js/28/18/intl/ja_ALL/util.js:216 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
uB.j @ maps.googleapis.com/maps-api-v3/api/js/28/18/intl/ja_ALL/util.js:216
maps.googleapis.com/maps-api-v3/api/js/28/18/intl/ja_ALL/util.js:216 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
uB.j @ maps.googleapis.com/maps-api-v3/api/js/28/18/intl/ja_ALL/util.js:216
js:35 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
_.rb @ js:35