[#866] Map slider on project main page

Initial version of map slider on project main page, showing project and update pins. In this version, we use jQuery for the slider, because we'll have to rebuild the way we show maps if we don't adhere to this.

akvo/templates/partials/project_header.html

@@ -1,19 +1,19 @@
-{% load i18n %}
+{% load i18n maps %}
 
 <header>
     <div class="container">
         <div class="row">
             <div class="col-sm-8 col-xs-8">
                 <h1>{{project.title}}</h1>
                 <p>{{project.subtitle}}</p>
-                <p class="small"><span class="glyphicon glyphicon-globe"></span> {{project.primary_location.country}}, {{project.primary_location.country.continent}} &nbsp; <a href="#" class="map-toggle">View map</a></p>
+                <p class="small"><span class="glyphicon glyphicon-globe"></span> {{project.primary_location.country}}, {{project.primary_location.country.continent}} &nbsp; <a href="#" onclick="maptoggle()" class="map-toggle">Show map +</a></p>
             </div>
             <div class="col-sm-4 col-xs-4">
                 Share <a href="#" class="btn btn-primary">Follow project</a>
             </div>
         </div>
-        <div class="row hidden">
-            MAP HERE WITH PROJECT PIN and UPDATE PINS
+        <div style="display: None" id="project-map" class="row initial">
+            {% project_map project.id '100%' '300px' %}
         </div>
     </div>
 </header>

akvo/templates/project_main.html

@@ -6,6 +6,22 @@
 
 {% block head_js %}
     <script type="application/json" id="accordion-data">{{ accordion_data|safe }}</script>
+
+    <script type="text/javascript">
+        function maptoggle() {
+            if ($( "#project-map" ).css('display') == 'none') {
+                $( "#project-map" ).slideToggle('slow');
+                if ($('#project-map').hasClass('initial')) {
+                    googleMap.load();
+                    $( "#project-map" ).removeClass('initial');
+                }
+                $('.map-toggle').html('HIDE MAP -');
+            } else {
+                $( "#project-map" ).slideToggle('slow');
+                $('.map-toggle').html('SHOW MAP +');
+            }
+        };
+    </script>
 {% endblock %}
 
 {% block maincontent %}