=raw "</div>"

.specific_map
  -img_url = "/carte-veterinaires.jpg"
  .article_top{:style => "background-image:url('#{img_url}');height:480px;position:relative", :class => ("with_img")}
    .gradient
    %h1{:style => "position:absolute;bottom:20px;left:10px;right:10px;"}
      Vétérinaires formés CAC
      
  -@facebook_img =  img_url
  
  
  .center{:style => "max-width:600px;padding-top:30px;text-align:center;"}
    %p
      Refusez la 
      
      =link_to "violence des clubs d'éducation canine révélée par 3P", "http://transformeurs.quartz.xyz/fr/follow/compagnons-animaux/cellule-zoe/education-canine-lenquete.html"
      ="!" 
    %p  
      Découvrez la liste des vétérinaires déjà formés à l’éducation non-violente. Et n'hésitez à parler de la 
      =link_to "Conduite Accompagnée du Chien", "http://www.conduite-accompagnee-chien.fr/", :target => "_blank"
      à votre praticien habituel, ou envoyez-nous ses coordonnées : nous le contacterons pour vous...
  
  
  .map_form
    =form_tag public_specific_map_path(1), :remote => true, :method => :get do 
      .wrapper
        .search_icon
          =i :search
        =text_field_tag :place, params[:place], :id => "place", :placeholder => "Votre ville"
      =hidden_field_tag :lat, params[:lat], :id => "lat"
      =hidden_field_tag :lng, params[:lng], :id => "lng"
      
      
      
      
  
  .map_container
    #list
      #results
        =render @specific_map_items
        =#specific_map_items= paginate @specific_map_items
  
    #map{:style => "height:500px;"}

  
      
    
    .clear
  
  .detail_inner
    %a{:anchor => "details"}
    #details
  :javascript
    function toggleBounce() {
      $.ajax("/public/specific_map_items/"+this.customInfo);
    }
    function update_bounds() {
      //alert(map.getBounds());
      $.ajax("/public/specific_maps/1");
    }


  :javascript
    var center = new google.maps.LatLng(37.4419, -122.1419);
    var options = {
      'zoom': 2,
      'center': center,
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), options);

  
    var markers = [];
    var arrmarkers = [];


  -@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}';"
        
  
      :javascript
        var latLng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
          'position': latLng, 
          customInfo : marker_id, 
          map : map,
          //icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000'
        
        });
        markers.push(marker);
        arrmarkers[marker_id] = marker;
        marker.addListener('click', toggleBounce);
      
      
      
      
  
  
  :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);
 
  :javascript
    var infowindow = new google.maps.InfoWindow({
        content: "contentString"
      });
  :javascript
    map.addListener('bounds_changed', function() {
        update_bounds();
      });
  :javascript
    autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('place')),
      {
        types: ['(cities)'],
        componentRestrictions: {}
      }
    );
    autocomplete.addListener('place_changed', fillInAddress);
    
    function fillInAddress() {
      var place = autocomplete.getPlace();
      var result = {}
      result["type"] = place.types[0]
      
      result["lat"] = place.geometry.location.lat()
      result["lng"] = place.geometry.location.lng()
      $("#lat").val(result["lat"]);
      $("#lng").val(result["lng"]);
    
      center = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
      
      
      map.panTo(center);
      map.setZoom(8);
      
      $.ajax({url : '/public/specific_maps/1.js', data : {place_type : result["type"], lat : place.geometry.location.lat(), lng : place.geometry.location.lng()}});
      
      
      
    }
    
=raw "<div class='main_container'>"