extract google maps class and load once.

2 files changed, 24 insertions, 17 deletions

diff --git a/app/assets/javascripts/views/google_map.js.coffee b/app/assets/javascripts/views/google_map.js.coffee
new file mode 100644
index 0000000..07f3062
--- /dev/null
+++ b/app/assets/javascripts/views/google_map.js.coffee
@@ -0,0 +1,18 @@
+class Stronglifters.GoogleMap
+  constructor: (div) ->
+    @div = document.getElementById(div)
+
+  present: (options) ->
+    console.log("presenting")
+    coordinates = new google.maps.LatLng(options.latitude, options.longitude)
+    map = new google.maps.Map(@div, {
+      center: coordinates,
+      zoom: 15,
+      scrollwheel: false,
+      mapTypeId: google.maps.MapTypeId.TERRAIN,
+    })
+    marker = new google.maps.Marker({
+      map: map,
+      position: coordinates,
+      title: options.name
+    })
diff --git a/app/views/gyms/show.html.erb b/app/views/gyms/show.html.erb
index 6089ce0..1709fe6 100644
--- a/app/views/gyms/show.html.erb
+++ b/app/views/gyms/show.html.erb
@@ -16,21 +16,10 @@
   </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, 'turbolinks:load', initialize);
+<script type="text/javascript" charset="utf-8">
+  new Stronglifters.GoogleMap("googleMap").present({
+    name: '<%= @gym.name %>',
+    latitude: <%= @gym.location.latitude %>,
+    longitude: <%= @gym.location.longitude %>,
+  });
 </script>