lundi 30 novembre 2015

How to show stores with nearest long/lat values using search function - Laravel 5 eloquent

Ideally I am looking for an Laravel 5 relevant answer. I am trying to make a store locator app. I am up to the point where I'm trying to match one pair of lat/long coordinates (calculated from an address that a user enters into search box) with the nearest (within 100km radius) coordinates/existing stores in my database.

The user enters an address which is converted (using geocoding) into lat and lng coordinates. These are sent to my 'articles' page which has a list of stores & a google map. I used a simple tutorial about scope search to show my articles/stores based on their text 'address'. But this obviously doesn't work for two coordinates. I have a table called Articles which has: id, address, lat, lng, website, title etc..

I need something like this or this but using eloquent.

Current Article Model:

    public function scopeSearch($query, $search){

    return $query->where('address', 'LIKE', "%$search%" );
   }

Articles Controller

 public function index(Request $request)
{
     $query = $request->get('q');
     $articles = $query
    ? Article::search($query)->get()
    : Article::all();
    return view('articles.index', compact('categories'))->withArticles($articles);
}

Current form/ geocode:

    {!! Form::open(['method' => 'GET', 'id' => 'searchForm', 'name' => 'searchForm', 'route' => 'articles_path']) !!}
      {!! Form::input('search', 'q', null, ['placeholder' => 'LOCATION', 'class' => 'locationSearch', 'id' => 'searchInput'])!!}
      {!! Form::hidden('lat', null, ['id' => 'lat'])!!}
      {!! Form::hidden('lng', null, ['id' => 'lng'])!!}
      {!! Form::submit('MAKE ME HAPPY', array('id' => 'submitButton')) !!}
    {!! Form::close() !!}

 <script>
$('#submitButton').on('click', function(event){
    event.preventDefault();
    var address = $('#searchInput').val();
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
             var lat = results[0].geometry.location.lat();
             var lng = results[0].geometry.location.lng();
             $('#lat').val(lat);
             $('#lng').val(lng);
          $('#searchForm').submit();

        } else {
            alert("Geocode was not successful");
        }
    });
});
</script>  



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire