0
https://github.com/apneadiving/Google-Maps-for-Railsの手順に従って新しいテストアプリを構築しています。なぜ私は空のフレーム、マップ、マーカーなしでレンダリングされているのか分かりません。レンダリング時に空のGoogleマップ
ここに私のコードのスナップショットがあります。
application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My New Google Maps Rails App</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script src="https://maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/richmarker/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<%= csrf_meta_tags %>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<%= render 'layouts/messages' %>
</div>
<%= yield %>
</div>
</body>
</html>
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require underscore
//= require gmaps/google
//= require bootstrap-sprockets
//= require_tree .
items_controller.rb - インデックス方法
def index
@items = Item.order(updated_at: :desc, created_at: :desc)
@hash = Gmaps4rails.build_markers(@items) do |item, marker|
marker.lat 43.70676484
marker.lng -79.39831068
marker.infowindow "TEST"
end
end
のJavaスクリップコードファイル内gmaps.js
handler = Gmaps.build('Google');
handler.buildMap({
provider: {
disableDefaultUI: true
// pass in other Google Maps API options here
},
internal: {
id: 'map'
}
},
function(){
markers = handler.addMarkers(markers);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
}
);
し、最終的にitems
<h1>Items Index</h1>
<!--<p id="notice"><%= notice %></p>-->
<h3>Listing Items</h3>
<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
<thead>
<tr>
<th colspan="4" style="text-align: center">Actions</th>
<th style="text-align: center">ID</th>
<th style="text-align: center">Item ID</th>
<th style="text-align: center">Item Name</th>
<th style="text-align: center">Created At</th>
<th style="text-align: center">Updated At</th>
</tr>
</thead>
<tbody>
<% @items.each do |item| %>
<tr>
<td><%= link_to 'Show', item %></td>
<td><%= link_to 'Edit', edit_item_path(item) %></td>
<td><%= link_to 'Destroy', item, method: :delete, data: { confirm: 'Are you sure?' } %></td>
<td><%= link_to 'GET-Update', [:get_update, item] %></td>
<td><%= item.id %></td>
<td><%= item.item_id %></td>
<td><%= item.item_name %></td>
<td><%= item.created_at %></td>
<td><%= item.updated_at %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<div class="row-fluid">
<div id="map" style='width: 100%; height: 500px; border: 1px solid black;'></div>
</div>
<br>
<%= link_to 'New Item', new_item_path %> |
<%= link_to 'Home', '/' %>
<script type="text/javascript">
markers = handler.addMarkers(<%=raw @hash.to_json %>);
</script>
ためindex.html.erbファイルには、私がここで間違ってやっているのか分からないのですか？
また、addMarkersメソッドでは、latとlngが正しく設定されていないと思われます。コントローラからの値がメソッドに渡されるとは思わないでください。