How to Add Geolocation-Based Property Search & Map Integration in Laravel for an Airbnb Clone with External APIs?
Tags: airbnbclone, airbnbphpscript, airbnbclonescript, airbnbclonesoftware
Published: 2023-10-10 10:03:13


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1nsr95euiakq6amj5en.jpg)

**Implementing geolocation-based search and map integration in a Laravel application, such as an Airbnb clone, involves several steps. In this example, I'll guide you through the process of setting up a geolocation-based property search using the Google Maps API and Laravel.**

**Step 1: Set Up a Laravel Project**

If you haven't already, create a new Laravel project:

```bash
composer create-project --prefer-dist laravel/laravel airbnb-clone
cd airbnb-clone
```

**Step 2: Configure Your Database**

Set up your database connection in the .env file and run migrations to create a properties table:

```bash
php artisan make:model Property -m
php artisan migrate
```

Define the schema for your properties table in the generated migration file (database/migrations/YYYY_MM_DD_create_properties_table.php):

```php
public function up()
{
    Schema::create('properties', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('description');
        $table->decimal('latitude', 10, 7);
        $table->decimal('longitude', 10, 7);
        $table->timestamps();
    });
}
```

**Step 3: Create a Property Model and Seeder**

Define the Property model (app/Models/Property.php) and create a seeder to populate the database with sample properties:

```bash
php artisan make:seeder PropertySeeder
```

In Property.php, add the fillable fields and define a scope for geolocation-based search:

```php
protected $fillable = ['title', 'description', 'latitude', 'longitude'];

public function scopeWithinDistance($query, $latitude, $longitude, $radius = 10)
{
    return $query
        ->select('id', 'title', 'description', 'latitude', 'longitude')
        ->selectRaw(
            "(6371 * acos(cos(radians(?)) * cos(radians(latitude)) * cos(radians(longitude) - radians(?)) + sin(radians(?)) * sin(radians(latitude)))) AS distance",
            [$latitude, $longitude, $latitude]
        )
        ->having('distance', '<=', $radius);
}
```

In PropertySeeder.php, seed some sample data with coordinates:

```php
use Illuminate\Database\Seeder;
use App\Models\Property;

class PropertySeeder extends Seeder
{
    public function run()
    {
        Property::create([
            'title' => 'Cozy Apartment',
            'description' => 'A comfortable apartment in the city center.',
            'latitude' => 40.7128,
            'longitude' => -74.0060,
        ]);

        // Add more properties here...
    }
}
```

Run the seeder to populate the database:

```bash
php artisan db:seed --class=PropertySeeder
```

**Step 4: Create the Search Controller**

Generate a controller for property search:

```bash
php artisan make:controller PropertyController
```

In PropertyController.php, create a method for geolocation-based search:

```php
use Illuminate\Http\Request;
use App\Models\Property;

public function search(Request $request)
{
    $latitude = $request->input('latitude');
    $longitude = $request->input('longitude');
    $radius = $request->input('radius', 10); // Default radius is 10 kilometers

    $properties = Property::withinDistance($latitude, $longitude, $radius)->get();

    return response()->json(['properties' => $properties]);
}
```

**Step 5: Set Up Routes**

Define the API route for property search in routes/api.php:

```php
Route::get('/properties/search', 'PropertyController@search');
```

**Step 6: Create the Frontend**

For the frontend, you can use JavaScript and a mapping library like Leaflet or Google Maps. Here's an example using Leaflet:

1. Install Leaflet and Leaflet.markercluster via npm:

```bash
npm install leaflet leaflet.markercluster
```

2. Create a Vue component or use JavaScript to integrate the map into your frontend. Here's a simplified example:

```html
<!-- Vue Component Template -->
<template>
  <!-- Map Container -->
  <div>
    <div id="map"></div>
    <!-- Search Inputs -->
    <div>
      Latitude: <input v-model="latitude" />
      Longitude: <input v-model="longitude" />
      Radius (km): <input v-model="radius" />
      <button @click="searchProperties">Search</button>
    </div>
    <!-- Property List -->
    <ul>
      <li v-for="property in properties" :key="property.id">
        {{ property.title }} - {{ property.distance }} km away
      </li>
    </ul>
  </div>
</template>

<!-- Vue Component Script -->
<script>
import L from 'leaflet';

export default {
  data() {
    return {
      latitude: 0,
      longitude: 0,
      radius: 10,
      properties: [],
      map: null,
    };
  },
  mounted() {
    this.map = L.map('map').setView([this.latitude, this.longitude], 10);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
  },
  methods: {
    searchProperties() {
      axios
        .get(`/api/properties/search?latitude=${this.latitude}&longitude=${this.longitude}&radius=${this.radius}`)
        .then((response) => {
          this.properties = response.data.properties;
          this.updateMarkers();
        })
        .catch((error) => {
          console.error(error);
        });
    },
    updateMarkers() {
      // Clear existing markers
      this.map.eachLayer((layer) => {
        if (layer instanceof L.Marker) {
          this.map.removeLayer(layer);
        }
      });

      // Add new markers
      this.properties.forEach((property) => {
        L.marker([property.latitude, property.longitude])
          .addTo(this.map)
          .bindPopup(property.title);
      });
    },
  },
};
</script>

<!-- Vue Component Styles -->
<style>
#map {
  height: 400px;
}
</style>
```

**Step 7: Start Your Development Server**

Run your Laravel development server and compile your frontend assets:

```bash
php artisan serve
npm run dev
```

Now, when you access your application, you should have a simple geolocation-based property search and map integration using Laravel, Vue.js, and the Google Maps API.

Remember to customize and enhance this example to fit the specific requirements of your Airbnb clone. Additionally, consider implementing user authentication and security measures when handling user-generated data and location information.

**Pro Tip:** 

Speed up your short-term vacation property rental business dreams with "Hyra" by Cron24 Technologies. It's a ready-made **[Airbnb clone script](https://cron24.com/airbnb-clone)** crafted with powerful Laravel code. It includes lots of ready-made functionalities like inbuilt Google Maps, geolocation-based search, Google auto-complete search, and more. This script gives aspiring entrepreneurs a head start, saving time and effort. 

Using the Hyra software, you can launch your rental platform faster and focus on making it your own. Start your journey to success with this pre-built solution with **[splendid 24/7 technical and customer care support](sales@cron24.com)**! 

Thank you for your time.