adiciona seção de localização.

lucianoratamero · lucianoratamero · commit 4eb27d71670d · 2018-02-04T16:36:07.000-02:00
diff --git a/core/static/css/page-specific/_eventos.scss b/core/static/css/page-specific/_eventos.scss
@@ -6,3 +6,5 @@
     margin: 1em auto;
   }
 }
+
+#map-canvas { height: 20em; }
diff --git a/core/static/img/marker-default.png b/core/static/img/marker-default.png
diff --git a/core/templates/base.html b/core/templates/base.html
@@ -16,6 +16,8 @@
 
   {% stylesheet "main" %}
 
+  {% javascript "main" %}
+
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
@@ -62,9 +64,6 @@ <h2>Contato/Social</h2>
     </div>
   </div>
 
-  {% javascript "main" %}
-  {% block extra-js %}{% endblock %}
-
   <script type="text/javascript">
     $(document).ready(function(){
       var fixMenuOnTop = function(){
@@ -87,5 +86,6 @@ <h2>Contato/Social</h2>
       })
     })
   </script>
+  {% block extra-js %}{% endblock %}
 </body>
 </html>
diff --git a/core/templates/eventos.html b/core/templates/eventos.html
@@ -6,4 +6,6 @@
 
   {% include "partials/_eventos-sobre.html" %}
 
+  {% include "partials/_eventos-localização.html" %}
+
 {% endblock %}
diff --git a/core/templates/partials/_eventos-localização.html b/core/templates/partials/_eventos-localização.html
@@ -0,0 +1,96 @@
+
+<div class="seção">
+  <div class="container">
+
+    <div class="row">
+      <div class="col-xs-12 mb-4-em">
+        <h2>Localização</h2>
+        <hr/>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-xs-12">
+        <p>
+          {{ evento_atual.endereço }}
+        </p>
+        <div id="map-canvas" class="location-area" data-address="{{ evento_atual.endereço }}"></div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+
+{% block extra-js %}
+  <script src="//maps.google.com/maps/api/js?key=AIzaSyA7l-tQWZJZinK0_jTYcI327dX2_dYIMbY
+"></script>
+  <script type="text/javascript">
+    (function () {
+      'use strict';
+
+      var conf = {};
+
+      // Init functions, called on DOMContentLoaded event
+      conf.init = function () {
+          conf.map.init($('#map-canvas'));
+      };
+
+      /***
+          Google Maps implementation
+      ***/
+      conf.map = {
+          marker: '/static/img/marker-default.png'
+      };
+
+      // Google Maps configs
+      conf.map.init = function ($element) {
+          conf.map.element = $element;
+
+          conf.map.geocoder = new google.maps.Geocoder();
+
+          conf.map.latlng = new google.maps.LatLng(0, 0);
+
+          conf.map.options = {
+              zoom: 16,
+              center: conf.map.latlng,
+              scrollwheel: false,
+              streetViewControl: true,
+              labels: true,
+              mapTypeId: google.maps.MapTypeId.ROADMAP
+          };
+
+          conf.map.canvas = new google.maps.Map(conf.map.element.get(0), conf.map.options);
+          conf.map.canvas.setCenter(conf.map.latlng);
+
+          conf.map.createMarker();
+      };
+
+      conf.map.createMarker = function () {
+
+          conf.map.address = conf.map.element.attr('data-address');
+
+          conf.map.geocoder.geocode({ 'address': conf.map.address}, function (results, status) {
+
+              if (status === google.maps.GeocoderStatus.OK) {
+
+                  conf.map.canvas.setCenter(results[0].geometry.location);
+
+                  new google.maps.Marker({
+                      map: conf.map.canvas,
+                      position: results[0].geometry.location,
+                      icon: conf.map.marker
+                  });
+              } else {
+                  if (window.console) {
+                      console.log('Google Maps was not loaded: ', status);
+                  }
+              }
+          });
+      };
+
+      conf.init();
+    }());
+
+  </script>
+{% endblock %}

Original file line number	Diff line number	Diff line change
`@@ -6,3 +6,5 @@`
`6`	`6`	`margin: 1em auto;`
`7`	`7`	`}`
`8`	`8`	`}`
	`9`	`+`
	`10`	`+#map-canvas { height: 20em; }`