Google Mapの指し示す位置が表示されません。（rails）

Question

###前提・分からないこと
Google Mapをサイト上（RubyonRails）で表示させたいのですが、下記のような状態で、実際に入れている位置を示してくれません。

###エラーメッセージ

Uncaught ReferenceError: google is not defined
    at eval (eval at <anonymous> (infobox_packed.js:1), <anonymous>:1:1066)
    at infobox_packed.js:1
(anonymous) @ VM5245:1
(anonymous) @ infobox_packed.js:1
js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap:98 Uncaught mc
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

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

###該当するソースコード

・application.html.erb

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzOpoIJy-9aLUOydR1E_PoMGg7itdjWpU&callback=initMap"async defer></script>
    <script src="http://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
    <script src="http://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

・ビュー

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

・コントローラー

  def map
    @hash = Gmaps4rails.build_markers(@places) do |place, marker|
      marker.lat place.latitude
      marker.lng place.longitude
      marker.infowindow place.mapdescription
      marker.json({title: place.title})
    end
  end

Comments

[moke]

おそらくgoogle APIやjavascriptの質問かなーと思います。

[yamady]

mokeさま、いつもありがとうございます！ただいま、カテゴリを変更いたしました。

Answer 1

"initMap is not a function"

というエラーそのままなのではないでしょうか。

&callback=initMap

と、自分で指定しているからにはfunction initMap()を用意していなければ動きません

Comments

[yamady]

ありがとうございます！下記の対応でできました！！

<script type="text/javascript">
function initMap() {

var test ={lat: <%= @place.latitude %>, lng: <%= @place.longitude %>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: test
});
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);

var contentString = '住所：<%= @place.address %>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
position:test,
map: map,
title: contentString
});

marker.addListener('click', function() {
infowindow.open(map, marker);
});
}