:javascript
  var map;
  var marker;
  var sizer;
  var radiusWidget;
  


:javascript
  function init_radius_form(){
  
    if($("#with_radius_check").is(':checked')){
      
      $(".select_radius").removeClass("active");
      $("#with-radius-label").addClass("active");
      $("#map-canvas").show();
      
      google.maps.event.trigger(map,'resize');
      marker.setPosition(center );
      map.panTo(center);
      $(".annonces_sidebar").removeClass("map_blur");
      update_radius();
      map.fitBounds(radiusWidget.get('bounds'));
      //alert(radiusWidget.get('bounds'));
      
      
      
      
      
    }
    else{
      //$(".select_radius").removeClass("active");
      
      $("#no-radius-label").addClass("active");
      $("#map-canvas").show();
      map.fitBounds(radiusWidget.get('bounds'));
      $(".annonces_sidebar").addClass("map_blur");
      
    }
    
    
    
    
  }
  function update_bounds(){
      map.fitBounds(radiusWidget.get('bounds'));
    
  }
  
  function update_radius(){
    distance = $("#radius_value_field").val();
    $("#place_dist_field").val(distance);
    radiusWidget.set('distance', distance);
    radiusWidget.center_changed();
    
  }
  
 




:javascript
  var placeSearch, autocomplete;
  
  
 

  function initAutocomplete(country) {
    autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('place')),
      {
        types: ['(regions)'],
        componentRestrictions: {}
      }
    );
    autocomplete.addListener('place_changed', fillInAddress);
    $("#country_selectors .btn").removeClass("btn-primary");
    
  }
  
  
  function change_country(country) {
    initAutocomplete(country);
    reset_geocode();
        
  }
  
  
  function calcDistance(p1, p2){
    return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2));
  }
  
  function set_address(address){

    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({'address': address}, function(results, status) {
    
    fillInAddress(results[0]);
    
    });
    
  }
  
  function fillInAddress(place) {
    if (typeof place == 'undefined'){
      var place = autocomplete.getPlace();
      
    }
    else{
      
      
    }
    //alert(place)
    var result = {}
    result["type"] = place.types[0]
    
    result["lat"] = place.geometry.location.lat()
    result["lng"] = place.geometry.location.lng()
    
    console.log(result);
    console.log(place.address_components);
        var components = place.address_components;
        for (var i = 0, component; component = components[i]; i++) {
            result[component.types[0]] = component['long_name'];
            result[component.types[0]+"_short"] = component['short_name'];
        }
    
    center = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
    
    
    south_west = place.geometry.viewport.getSouthWest();
    north_east = place.geometry.viewport.getNorthEast();
    
    north_west = new google.maps.LatLng(north_east.lat(), south_west.lng());
    south_east = new google.maps.LatLng(south_west.lat(), north_east.lng());
   
    if (typeof radiusWidget != 'undefined'){
      distance = Math.round(calcDistance(place.geometry.viewport.getCenter(), place.geometry.viewport.getSouthWest()));
      $("#with_radius_check").prop("checked", true);
    
      marker.setPosition(center );
      radiusWidget.set('distance', (distance/1000));
    
      radiusWidget.center_changed();
    
      google.maps.event.trigger(sizer, 'drag');
    
      $("#search_map").show();
      //google.maps.event.trigger(map,'resize');
    
      map.panTo(center);
      map.fitBounds(radiusWidget.get('bounds'));
      if (typeof radiusWidget != 'undefined' & typeof home == 'undefined'){
      $('#search_form form').submit();
      }
    
   }
   
    
    //console.log(result);
    //$("#lat").append(place.geometry.location.lat()+"<br>")
    //$("#g_longitude").val(place.geometry.location.lng())
    
    //$.ajax({ url: '/public/cities/search.js',data: {place : $(this).val()}});
    //$.ajax({url : '/public/cities/search.js', data : {place_type : result["type"], lat : place.geometry.location.lat(), lng : place.geometry.location.lng()}});
    
    
  }
  
  function reset_geocode(){
    
    $("#g_text_visu").html("");
    $("#geocode input").val('');
    
    
  }
  
:javascript
  $(document).ready(function() {      
    $("#place").keydown(function() {
      if(event.keyCode == 13) {
        event.preventDefault();
        return false;
      }     
    });
    
    $("#place").change(function() {
      if ($("#place").val() == ""){
        $("#search_form form").submit();
      }
      reset_geocode();    
      event.stopPropagation();    
    });
    
  });
  
:javascript
  initAutocomplete("fr");
  

  
  





:javascript

  function DistanceWidget(map) {

    this.set('map', map);
    this.set('position', map.getCenter());

    marker = new google.maps.Marker({
      draggable: true,
      title: 'Centre de la recherche'
    });

    // Bind the marker map property to the DistanceWidget map property
    marker.bindTo('map', this);

    // Bind the marker position property to the DistanceWidget position
    // property
    marker.bindTo('position', this);

    // Create a new radius widget
    radiusWidget = new RadiusWidget();

    // Bind the radiusWidget map to the DistanceWidget map
    radiusWidget.bindTo('map', this);

    // Bind the radiusWidget center to the DistanceWidget position
    radiusWidget.bindTo('center', this, 'position');

    // Bind to the radiusWidgets' distance property
    this.bindTo('distance', radiusWidget);

    // Bind to the radiusWidgets' bounds property
    this.bindTo('bounds', radiusWidget);
  }
  DistanceWidget.prototype = new google.maps.MVCObject();


  /**
   * A radius widget that add a circle to a map and centers on a marker.
   *
   * @constructor
   */
  function RadiusWidget() {
    var circle = new google.maps.Circle({

      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: "#FF0000",
      fillOpacity: 0.1
      
    });

    // Set the distance property value, default to 10km.
    this.set('distance', 10);

    // Bind the RadiusWidget bounds property to the circle bounds property.
    this.bindTo('bounds', circle);

    // Bind the circle center to the RadiusWidget center property
    circle.bindTo('center', this);

    // Bind the circle map to the RadiusWidget map
    circle.bindTo('map', this);

    // Bind the circle radius property to the RadiusWidget radius property
    circle.bindTo('radius', this);

    // Add the sizer marker
    this.addSizer_();
  }
  RadiusWidget.prototype = new google.maps.MVCObject();


  /**
   * Update the radius when the distance has changed.
   */
  RadiusWidget.prototype.distance_changed = function() {
    this.set('radius', this.get('distance') * 1000);
  };


  /**
   * Add the sizer marker to the map.
   *
   * @private
   */
  RadiusWidget.prototype.addSizer_ = function() {
    
    
    
    sizer = new google.maps.Marker({
      draggable: true,
      title: 'Rayon',
      icon: {
                          path: google.maps.SymbolPath.CIRCLE,
                          scale: 7,
                          strokeColor: "#FF0000",
                          strokeOpacity: 0.8,
                          strokeWeight: 2,
                          fillColor: "#FFFFFF",
                          fillOpacity: 1
                      }
    });

    sizer.bindTo('map', this);
    sizer.bindTo('position', this, 'sizer_position');

    var me = this;
    google.maps.event.addListener(sizer, 'drag', function() {
      // As the sizer is being dragged, its position changes.  Because the
      // RadiusWidget's sizer_position is bound to the sizer's position, it will
      // change as well.
      var min = 0.5;
      var max = 1500000;
      var pos = me.get('sizer_position');
      var center = me.get('center');
      var distance = google.maps.geometry.spherical.computeDistanceBetween(center, pos) / 1000;
      if (distance < min) {
        me.set('sizer_position', google.maps.geometry.spherical.computeOffset(center, min * 1000, google.maps.geometry.spherical.computeHeading(center, pos)));
      } else if (distance > max) {
        me.set('sizer_position', google.maps.geometry.spherical.computeOffset(center, max * 1000, google.maps.geometry.spherical.computeHeading(center, pos)));
      }
      // Set the circle distance (radius)
      $("#radius_value_field").val(Math.round(distance));
      me.setDistance();
    });
  };


  /**
   * Update the center of the circle and position the sizer back on the line.
   *
   * Position is bound to the DistanceWidget so this is expected to change when
   * the position of the distance widget is changed.
   */
  RadiusWidget.prototype.center_changed = function() {
    var bounds = this.get('bounds');

    // Bounds might not always be set so check that it exists first.
    if (bounds) {
      var lng = bounds.getNorthEast().lng();

      // Put the sizer at center, right on the circle.
      var position = new google.maps.LatLng(this.get('center').lat(), lng);
      this.set('sizer_position', position);
    }
  };


  /**
   * Set the distance of the circle based on the position of the sizer.
   */
  RadiusWidget.prototype.setDistance = function() {
    // As the sizer is being dragged, its position changes.  Because the
    // RadiusWidget's sizer_position is bound to the sizer's position, it will
    // change as well.
    var pos = this.get('sizer_position');
    var center = this.get('center');
    var distance = google.maps.geometry.spherical.computeDistanceBetween(center, pos)/1000;

    // Set the distance property for any objects that are bound to it
    this.set('distance', distance);
  };


  function init() {
    
    
    
    
    
    //radiusWidget.setDistance();
    //google.maps.event.trigger(sizer, 'drag');
    
  }

  function displayInfo(widget) {
    //var info = document.getElementById('info');
    //info.innerHTML = 'Position: ' + widget.get('position') + ', distance: ' +
    //  widget.get('distance');
    //alert(widget.get('distance'));
      
    //alert(widget.get('position'));
    if(typeof widget.get('position') !== "undefined"){
      
    $("#place_lat_field").val(widget.get('position').lat());
    $("#place_lng_field").val(widget.get('position').lng());
    $("#place_dist_field").val(Math.round(widget.get('distance')));
  
  }
    //$("#radius_value_field").val(Math.round(widget.get('distance')));
      
  }

  google.maps.event.addDomListener(window, 'load', init);

-if params[:place] and params[:place] != "" and params[:place_lat] and params[:place_lng]
  %script
    ="var defaut_center = {lat: #{params[:place_lat]}, lng: #{params[:place_lng]}} "
    ="var defaut_distance = #{params[:place_dist]}; "
-else
  :javascript
    var defaut_center = {lat: -30, lng: 150} ;
    var defaut_distance = 12;
    
:javascript
  var isDraggable = !('ontouchstart' in document.documentElement);
  var mapDiv = document.getElementById('map-canvas');
  map = new google.maps.Map(mapDiv, {
    center: defaut_center,
    draggable: isDraggable,
    zoom: 7,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControl: true,
    mapTypeControl: false,
    streetViewControl: false
  });
  

:javascript
  var distanceWidget = new DistanceWidget(map);
  

  google.maps.event.addListener(sizer, 'dragend', function() {
    update_bounds();
    $("#search_form form").submit();
  });
  
  google.maps.event.addListener(marker, 'dragend', function() {
    update_bounds();
    $("#search_form form").submit();
  });

  google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
    
    displayInfo(distanceWidget);
  });

  google.maps.event.addListener(distanceWidget, 'position_changed', function() {
    displayInfo(distanceWidget);
  });
  
  radiusWidget.set('distance', default_distance);
  
  
  radiusWidget.center_changed();
  
  
  
    

  
:javascript
  init_radius_form();