<script src="/assets/typeahead.js" type='text/javascript'></script>
<script src="/assets/typeahead-addresspicker.js" type='text/javascript'></script>
<!-- for search input END -->

<!-- for MAP -->
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<!-- for MAP END -->

<%= form_tag search_path, :method => :get do %>
  <div class="input-group input-group-sm" id="The-Basics">

    <%= text_field_tag :q, params[:q], class: 'form-control typeahead input-sm', id: 'pac-input', :placeholder => 'Enter City, State or Zip!', :autofocus => true %>

    <span class="input-group-btn">
       <%= submit_tag "Go", :name => nil, class: 'btn btn-primary btn-sm', id: '', data: { no_turbolink: true } %>
   </span>
 </div>
<% end %>

----other content here------

<!-- Gmaps -->
  <div id="rightCol">
  <div id="map-canvas"></div>
<!-- Gmaps End -->

<script type="text/javascript">
//google maps
handler = Gmaps.build('Google',
  {
    markers: {
      clusterer: {
        gridSize: 10, maxZoom:15
      }
    }
  });

handler.buildMap({
    provider: {
      disableDefaultUI: false
      // pass in other Google Maps API options here
    },
    internal: {
      id: 'map-canvas'
    }
  },
  function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);

    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    handler.getMap().setZoom(9);
    handler.map.centerOn;
  }
);

// AUTO COMPLETE FOR SEARCH

// mobile address picker
var addressPicker = new AddressPicker({
  autocompleteService: {
    types: ['(cities)'],
    componentRestrictions: { country: 'US' }
    }
  }
);

$('#pac-input').typeahead(null, {
  displayKey: 'description',
  source: addressPicker.ttAdapter()
});

//  address picker main
var addressPicker = new AddressPicker({
  autocompleteService: {
    types: ['(cities)'],
    componentRestrictions: { country: 'US' }
    }
  }
);

$('#pac-input2').typeahead(null, {
  displayKey: 'description',
  source: addressPicker.ttAdapter()
});

// AUTO COMPLETE FOR SEARCH END

def search
@properties = Property.search_available_coming(params[:available_coming]).where(property_active: true).order(property_city: :asc).paginate(:page => params[:page], :per_page => 10)
@hash = Gmaps4rails.build_markers(@properties) do |property, marker|

    marker.lat property.latitude
    marker.lng property.longitude
    marker.picture({
        "url"    => view_context.image_path("Orange-House-Icon.png"),
        "width"  => 50,
        "height" => 50
         })
    marker.infowindow  render_to_string( partial: 'layouts/mapinfo', locals: { property: property.id })
    marker.title "i'm the title"
end
end