Blog

How to Add Google Maps in laravel 11 | websolutioncode.com
How to Add Google Maps in laravel 11 | websolutioncode.com

How to Add Google Maps in laravel 11

Are you looking to integrate Google Maps into your Laravel 11 application? Adding maps can enhance user experience and provide valuable location-based functionalities. In this tutorial, we’ll walk through the process of integrating Google Maps into a Laravel 11 application, step by step. By the end, you’ll have a fully functional map embedded in your Laravel project.

Prerequisites

Before we begin, make sure you have the following:

  • Basic understanding of Laravel 11.
  • Composer installed on your system.
  • Text editor or IDE of your choice.
  • Google Maps API key.

Step 1: Set Up a New Laravel Project

If you haven’t already created a Laravel project, you can do so using Composer. Open your terminal and run the following command:

composer create-project --prefer-dist laravel/laravel laravel-google-maps

This command will create a new Laravel project named “laravel-google-maps.”

Step 2: Configure Google Maps API Key

To use Google Maps in your Laravel application, you need to obtain an API key from the Google Cloud Console. Once you have your API key, open the .env file in your Laravel project and add the following line:

GOOGLE_MAPS_API_KEY=your_api_key_here

Replace your_api_key_here with your actual API key.

Step 3: Install the Google Maps JavaScript SDK

Next, let’s install the Google Maps JavaScript SDK via npm. Run the following command in your terminal:

npm install @google/maps

This will install the necessary package to interact with the Google Maps API.

Step 4: Create a Blade View

Now, let’s create a new Blade view where we’ll add our map. Navigate to the resources/views directory and create a new file named map.blade.php.

Inside map.blade.php, add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps</title>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&callback=initMap" async defer></script>
    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
        }
    </script>
</body>
</html>

Step 5: Create a Route

Now, let’s create a route in Laravel to serve our map view. Open the routes/web.php file and add the following route:

Route::get('/map', function () {
    return view('map');
});

Step 6: Test Your Application

That’s it! You’ve successfully integrated Google Maps into your Laravel 11 application. To see the map in action, run your Laravel development server by executing the following command:

php artisan serve

Then, navigate to http://localhost:8000/map in your web browser.

Conclusion

In this tutorial, we’ve covered the process of adding Google Maps to a Laravel 11 application. By following these steps, you can enhance your application with interactive maps and location-based features. Feel free to explore the Google Maps API documentation to further customize and extend the functionality of your maps. Happy mapping!

Tags: ,