=raw "</div>"

.specific_map
  -img_url = "/cirques.jpg"
  .article_top{:style => "background-image:url('#{img_url}');height:480px;position:relative", :class => ("with_img")}
    
    %h1{:style => "position:absolute;bottom:20px;left:10px;right:10px;"}
      
      
  -@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 !"
  
  %h1{:style => "text-align:center;font-size:1.8em;padding-top:1em;"}
    Carte des communes qui ont déjà fait le choix de l'éthique !
  
  .center{:style => "max-width:700px;padding-bottom:30px;text-align:center;"}
    
    %p  
      Découvrez les communes qui ont fait le choix de l’éthique en refusant les cirques avec animaux !
    %p
      Et pour en inciter un plus grand nombre à suivre cet exemple, voici 
      =link_to "la marche à suivre", "https://jipe.fr/fr/cirques-les-bons-reflexes.html", :target => "_blank"
      %br
      quand un cirque est annoncé en ville…
  
  
      
      
  
  .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 :
    %p
      -c = []
      -@specific_map.specific_map_items.order(:city).each do |specific_map_item|
        -c << specific_map_item.city
      =c.join(", ")
=raw "<div class='main_container'>"