add google map to gyms#show.

2 files changed, 30 insertions, 4 deletions

diff --git a/app/views/gyms/show.html.erb b/app/views/gyms/show.html.erb
index 8ec2d5d..923368b 100644
--- a/app/views/gyms/show.html.erb
+++ b/app/views/gyms/show.html.erb
@@ -2,10 +2,35 @@
   <div class="large-12 columns">
     <h1><%= @gym.name %></h1>
     <p>
-      <%= @gym.full_address %>
-      <%= link_to @gym.location.try(:url) do %>
-        <i class="fa fa-map-marker" aria-hidden="true"></i>
-      <% end %>
+    <%= @gym.full_address %>
+    <%= link_to @gym.location.try(:url) do %>
+      <i class="fa fa-map-marker" aria-hidden="true"></i>
+    <% end %>
     </p>
   </div>
 </div>
+
+<div class="row">
+  <div class="col-sm-12 map no-padding">
+    <div id="googleMap" style="width:100%;height:500px;"></div>
+  </div>
+</div>
+
+<script type="text/javascript">
+  function initialize() {
+    var coordinates = new google.maps.LatLng(<%= @gym.location.latitude %>, <%= @gym.location.longitude %>);
+    var map = new google.maps.Map(document.getElementById("googleMap"), {
+      center: coordinates,
+      zoom: 15,
+      scrollwheel: false,
+      mapTypeId: google.maps.MapTypeId.TERRAIN,
+    });
+    var marker = new google.maps.Marker({
+      map: map,
+      position: coordinates,
+      title: '<%= @gym.name %>'
+    });
+  }
+  google.maps.event.addDomListener(window, 'load', initialize);
+  google.maps.event.addDomListener(document, 'page:load', initialize);
+</script>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 36b0719..cb6ec44 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -10,6 +10,7 @@
     <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
     <%= javascript_include_tag "//apis.google.com/js/api.js" %>
     <%= javascript_include_tag "//apis.google.com/js/client.js" %>
+    <%= javascript_include_tag "//maps.googleapis.com/maps/api/js" %>
     </script>
     <%= csrf_meta_tags %>
   </head>