adding map and directions button

adding lat lon map and get directions buttons

diff --git a/css/front.css b/css/front.css
index ea46591..f02d1be 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -10,15 +10,17 @@
     }
     .glm-reg-image-container{
         padding: 0;
+        margin-bottom: 10px;
     }
     #glm-reg-event-name{
         padding: 0;
         line-height: 1.2;
     }
-    .glm-reg-event-profile-details{
+    
+}
+.glm-reg-event-profile-details{
         padding-left: 0;
     }
-}
 .glm-reg-image-container{
     padding: 0;
     max-height: 350px;
@@ -35,6 +37,19 @@
     background-size: cover;
     position: relative;
 }
+#glm-reg-detail-map-button{
+    height: 35px;
+    padding: 5px 7px;
+    width: 171px;
+    float: left;
+    border-right: 1px solid white;
+}
+#glm-reg-detail-directions-button{
+    height: 35px;
+    padding: 5px 7px;
+    width: 170px;
+    float: left;
+}
 .glm-reg-date::before{
         /* top: 0px; */
     content: "";
@@ -56,6 +71,9 @@
     height: 24px;
     left: -36px;
 }
+.glm-reg-event-profile-map-container{
+    padding: 0;
+}
 .glm-reg-location::before{
     content: "";
     background-image: url(../assets/events/location-icon-24x24.png);
@@ -72,6 +90,7 @@
 #glm-reg-map-container{
     height: 0px;
     margin: 0;
+    padding: 0;
     overflow: hidden;
 }
 .glm-reg-event-profile-details-container{

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index 0c2941b..e3a1b5b 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -20,8 +20,6 @@
                 {if $regEvent.image}
                 <div class="glm-small-12 glm-medium-4 glm-columns glm-reg-image-container"> 
                     <img src="{$imgBaseUrl}/medium/{$regEvent.image}"/>
-                    
-                    
                 </div>
                 {/if}
                 <div class="glm-small-12 glm-medium-4 glm-columns glm-reg-event-profile-details-container">
@@ -46,6 +44,7 @@
                         </div>
                         <div class="glm-small-12 glm-columns glm-reg-event-profile-details">
                             <div id="glm-reg-detail-map-button" class="button map-button">View Map</div>
+                            <div id="glm-reg-detail-directions-button" class="button map-button">Get Directions</div>
                         </div>
                     {/if}
                     {literal}
@@ -75,7 +74,7 @@
         <div class="glm-columns glm-small-12">
             <div class="glm-reg-submit">
                 <div class="glm-reg-warning">You have not yet submitted your registration! <img src="{/literal}{$assetUrl}{literal}/fingerRightRed.svg" style="height: 2em;">
-                    <input id="glm-reg-cart-continue" type="submit" value="Continue" />
+                    <input class="button" id="glm-reg-cart-continue" type="submit" value="Continue" />
                 </div>
             </div>
         </div>
@@ -357,18 +356,30 @@ jQuery(function($){
         });
         $(this).html(mapBtnTxt);
     });
+    {if $regEvent.locations.lat !=0 && $regEvent.locations.lon != 0}
+        var eventlocation = new google.maps.LatLng({$regEvent.locations.lat}, {$regEvent.locations.lon});
+    {else}
+        var eventlocation = new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon});
+    {/if}
     function initMap() {
-
         // Set default - Need to make this configurable
         var map = new google.maps.Map(document.getElementById('glm-reg-map'), {
-                zoom: {$settings.maps_default_zoom},
-         
+            zoom: {$settings.maps_default_zoom},
+            center: eventlocation, 
             disableDefaultUI: false,
             mapTypeId: google.maps.MapTypeId.MAP,
         });
         
-        // Create a marker for this member
- 
+        // Create a marker for this event
+        {if $regEvent.locations.lat !=0 && $regEvent.locations.lon != 0}
+                var marker = new google.maps.Marker({
+                    map: map,
+                    position: new google.maps.LatLng({$regEvent.locations.lat}, {$regEvent.locations.lon}),
+                    draggable: false,
+                    animation: google.maps.Animation.DROP,
+                    title: '{$member.member|escape}'
+                });
+             {/if}
 
     }
     google.maps.event.addDomListener(window, 'load', initMap);