Visualise lat/lng on labs from

When map marker moved, also update the form label with lat/lng.
Refactored JS callbacks into a fuction.

app/assets/javascripts/labs.js.coffee

@@ -75,13 +75,22 @@ ready = ->
     $('.row-offcanvas').toggleClass('active')
 
 
-# Map in a Lab page
+# Map in a Lab page
 
 
   $('#lab_name').on 'change', () ->
     unless $('#lab_slug').val()
       $('#lab_slug').val( $(this).val().toLowerCase().replace(/[^A-Za-z0-9]/g,''); )
 
+  updateFormWithLatLng = (lat, lng) ->
+    $('.c-labs.a-new #lab_address_1').focus()
+    $("input#lab_latitude").val lat
+    $("input#lab_longitude").val lng
+    $('select#lab_country_code').trigger('change')
+    $('#lab_geoinfo')
+      .find('strong')
+      .text(Number(lat).toFixed(6) + ' / ' + Number(lng).toFixed(6))
+
   # $('.step-2').css(opacity: 0.5)
   $(".c-labs input#geocomplete").geocomplete
     map: "#location-picker-map"
@@ -91,15 +100,9 @@ ready = ->
     markerOptions:
       draggable: true
   .on 'geocode:dragged', (event, latLng) ->
-    $("input#lab_latitude").val latLng.lat()
-    $("input#lab_longitude").val latLng.lng()
+    updateFormWithLatLng(latLng.lat(), latLng.lng())
   .on 'geocode:result', (event, result) ->
-    $('.c-labs.a-new #lab_address_1').focus()
-    $("input#lab_latitude").val result.geometry.location.lat()
-    $("input#lab_longitude").val result.geometry.location.lng()
-    $('select#lab_country_code').trigger('change')
-
-
+    updateFormWithLatLng(result.geometry.location.lat(), result.geometry.location.lng())
 
 $(document).ready ready
 # $(document).on "page:load", ready

app/views/labs/_form.html.haml

@@ -125,14 +125,16 @@
       .question
         %h5 Step 1
         .text-small Enter the lab's address in the textbox below. Then drag the map marker to pinpoint its exact position.
-        = f.input :geocomplete, input_html: { id: 'geocomplete', data: { latlng: "#{@lab.latitude}, #{@lab.longitude}"} }, label: false
+        = f.input :geocomplete, input_html: { id: 'geocomplete', data: { latlng: (@lab.latitude.present? ? "#{@lab.latitude}, #{@lab.longitude}" : "false")} }, label: false
       .question.step-2
         %h5 Step 2
         .text-small Edit the details in the address fields below.
         .row
           .col-lg-6#map-holder
             #location-picker-map
           .col-lg-6
+            #lab_geoinfo
+              %p Marker Lat/Lng coordinates: <strong>#{(@lab.latitude.present? ? "#{@lab.latitude} / #{@lab.longitude}" : "")}</strong>
             = f.input :address_1, input_html: { data: {geo: "street_address"}}, label: 'Lab Address', placeholder: 'Address Line 1'
             = f.input :address_2, label: false, placeholder: 'Address Line 2 (Optional)'
             = f.input :city, input_html: { data: {geo: "locality"}}