=form_tag :url => "" do
  =text_field_tag :q, params[:q]
  =text_field_tag :place, "", :id => "place", :style => "width:300px"
  
  
  =text_field_tag :formated_address, "", :id => "formated_address"
  =text_field_tag :city, "", :id => "city"
  =text_field_tag :departement, "", :id => "departement"
  =text_field_tag :departement_short, "", :id => "departement_short"
  =text_field_tag :region, "", :id => "region"
  =text_field_tag :region_short, "", :id => "region_short"
  =text_field_tag :country, "", :id => "country"
  =text_field_tag :country_short, "", :id => "country_short"
  =text_field_tag :lat, "", :id => "lat"
  =text_field_tag :lng, "", :id => "lng"
  
  
  
  
  
  #mapcanvas{:style => "width:400px;height:400px;"}
  :javascript
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      streetViewControl:false,
      panControl:false
    };
    
    
    var geomap = new google.maps.Map(document.getElementById("mapcanvas"),
        mapOptions);
        
    var marker = new google.maps.Marker({
          position: new google.maps.LatLng(-34.397, 150.644),
          map: geomap,
          draggable: true,
          title: 'Hello World!'
      });
    
  
    var options = {
       types: ['(cities)']//,
       //componentRestrictions: {country: 'fr'}
    };
    var input = document.getElementById('place');
    autocomplete = new google.maps.places.Autocomplete(input, options);
    
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
       var place = autocomplete.getPlace();
       if (place.geometry.viewport) {
          geomap.fitBounds(place.geometry.viewport);
          console.log(place.geometry.viewport);
       } else {
          geomap.setCenter(place.geometry.location);
          geomap.setZoom(8);
          
          
       }
       $("#city").val(place.formatted_address);
       console.log(place.address_components)
       address_components = new Array;
       
      
       var city = "";
       var region = "";
       var departement = "";
       var zip = "";
       var country = "";
       var region_short = "";
       var departement_short = "";
       var country_short = "";
       
       $.each(place.address_components,function (){
         
         switch(this.types[0]){
                         case "postal_code":
                             zip = this.short_name;
                             break;
                        
                         case "administrative_area_level_1":
                             region = this.long_name;
                             region_short = this.short_name;
                             break;
                         case "locality":
                             city = this.short_name;
                             break;  
                        case "administrative_area_level_2":
                            departement = this.long_name;
                            departement_short = this.short_name;
                            break;
                        case "country":
                            country = this.long_name;
                            country_short = this.short_name;
                            
                            break;
                     }
         
       });
       console.log(place.geometry.location.lat());
       console.log(region_short);
       $("#region_short").val(region_short);
       $("#city").val(city);
       $("#departement").val(departement);
       $("#region").val(region);
       $("#country").val(country);
       $("#departement_short").val(departement_short);
       
       $("#country_short").val(country_short);
       
       $("#lat").val(place.geometry.location.lat());
       $("#lng").val(place.geometry.location.lng());
       
       marker.setPosition(place.geometry.location);
       marker.setVisible(true);
    });
   
    
    
    
    

  =submit_tag "rechercher", :class => "btn btn-primary"
  
-if @annonce_cat
  %h1
    Annonces 
    =@annonce_cat.name
=render @annonces