intra_app/app/views/public/specific_maps/cirques.html.haml

-menu_id = 2
-slug = "carte-cirques"
  
-@menu_item_lang = @lang.menu_item_langs.joins(:menu_item).where(:menu_items => {:menu_id => menu_id}).find_by_permalink(slug)

-if @menu_item_lang
  -@menu_item = @menu_item_lang.menu_item
  -if @menu_item and @menu_item.menu_content and @menu_item.menu_content.class.to_s == "Page"
    -@lang_page = @menu_item.menu_content.lang_pages.find_by_lang_site_id(@lang.id)
    -@description = @lang_page.description
    -@keywords = @lang_page.keywords
    -@twitter_title = @lang_page.twitter_title if @lang_page.twitter_title?

-if @menu_item
  -if @menu_item.title_image
    -if @menu_item.menu_item_langs.find_by_lang_site_id(@lang.id).image_file
      -img_url = @menu_item.menu_item_langs.find_by_lang_site_id(@lang.id).image_file.file.large.url 
      -@facebook_img =  @menu_item.menu_item_langs.find_by_lang_site_id(@lang.id).image_file.file.large.medium.url
    -elsif @menu_item.image_file
      -img_url = @menu_item.image_file.file.large.url 
      -@facebook_img =  @menu_item.image_file.file.large.medium.url
    -if img_url
      .menu_item_top.principal.with_ratio{:style => "background-image:url('#{img_url}');", :data => {:ratio => 0.30}}
    -else
      %div{:style => "height:55px;"}
  


  .menu_content_inner
    .inner
      .menu_item_content

        .first_title
          %h1=raw @menu_item.menu_content.lang_pages.find_by_lang_site_id(@lang.id).title
          %hr
              
          .description
            =raw @menu_item.menu_content.lang_pages.find_by_lang_site_id(@lang.id).description
  
        .render_block
          =render :partial => "public/blocks/block", :locals => {:block => @menu_item.menu_content.blocks.find_by_lang_site_id(@lang.id)}

=raw "</div>"





.specific_map
  
      
  -@facebook_img =  img_url
  -@title = "Carte des communes qui ont déjà fait le choix de l'éthique !"
  -@description = "Découvrez les communes qui ont fait le choix de l’éthique en refusant les cirques avec animaux !"
  
  
  
  
      
      
  
  .map_container
    
  
    #map{:style => "height:500px;width:100%;"}

  
      
    
    .clear
  
 
  :javascript
    function toggleBounce() {
      $.ajax("/public/specific_map_items/"+this.customInfo);
    }
    
    

  :javascript
    var center = new google.maps.LatLng(37.4419, -122.1419);
    var options = {
      'zoom': 2,
      'center': center,
      'mapTypeId': google.maps.MapTypeId.ROADMAP,
      "scrollwheel": false,
    };
    var map = new google.maps.Map(document.getElementById("map"), options);
    var infowindow = null;
    var markers = [];
    var arrmarkers = [];
    infowindow = new google.maps.InfoWindow({
    content: "..."
    });


  -@specific_map.specific_map_items.each do |specific_map_item|
    -if specific_map_item.g_latitude
      %script
        ="var lat = "+specific_map_item.g_latitude.to_s+";"
        ="var lng = "+specific_map_item.g_longitude.to_s+";"
        ="var marker_id = '#{specific_map_item.id}';"
        ="var content = '#{specific_map_item.city}';"
        
  
      :javascript
        var latLng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
          'position': latLng, 
          customInfo : marker_id, 
          map : map,
          title: content
          
        
        });
        markers.push(marker);
        arrmarkers[marker_id] = marker;
        
        google.maps.event.addListener(marker, 'click', function () {
        // where I have added .html to the marker object.
        infowindow.setContent(this.title);
        infowindow.open(map, this);
        });
      
      
  
  
  :javascript
    //var markerCluster = new MarkerClusterer(map, markers, { maxZoom: 7});
  
  :javascript
      var bounds1 = new google.maps.LatLng(41.3423276, -5.14214190000007);
      var bounds2 = new google.maps.LatLng(51.0891658, 9.55979339999999);
      var bounds = new google.maps.LatLngBounds(bounds1, bounds2);

      var map_center = new google.maps.LatLng(46.227638, 2.213749000000007);
    
      map.setCenter(map_center);
   
      map.fitBounds(bounds);
 
  .center{:style => "padding:30px 10px;text-align:center;"}
    %h2 La liste des communes :
    #list_city
      -c = []
      -@specific_map.specific_map_items.order("dpt_position DESC, dpt ASC").group("dpt").each do |dpt|
        -if dpt.dpt?
          %h4=dpt.dpt
        -@specific_map.specific_map_items.where(:dpt => dpt.dpt).order(" city ASC").each do |specific_map_item|
          -c << specific_map_item.city
          %p=specific_map_item.city
        
    :scss
      #list_city{
        column-count: 3;
        column-gap: 40px;
        
        p{
          margin:5px 0px;
          text-align:left;
        }
        
        h4{
          font-size:1em;
          text-align:left;
          margin-bottom:0;
          margin-top:20px;
        }
      }
      
      @media screen and (max-width:600px) {
        #list_city{
          column-count: 1;
          column-gap: 0px;
        }
        
        }
=raw "<div class='main_container'>"