Laravel 11 - Google Maps integration

Touseef Afridi
25 Sep 24

Laravel 11 - Google Maps integration

In this tutorial, we'll discuss how to integrate Google Maps into Laravel 11, which is useful for displaying interactive maps and location-based data.


If you're a video person, feel free to skip the post and check out the video instead!


Step # 1 : Create fresh Laravel project or use existing project.

Two commands to create fresh laravel project
Global Command : laravel new google-maps
Or use
Non Global Command : composer create-project laravel/laravel --prefer-dist google-maps

Step # 2 : Access the project.

Open a terminal (e.g., Git Bash) and navigate to your Laravel project's root folder.
Git Bash : cd c:xampp/htdocs/google-maps

Step # 3 : Update view.

Update the welcome.blade.php file with the following HTML to display Google Maps
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 11 - Google Maps - Code Shotcut</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container" style="margin-top: 50px;">
        <h2>Laravel 11 - Code Shotcut - Google Maps</h2>
        <div id="map"></div>
    </div>
    <script>
        function initMap() {
            const latLng = { lat: 21.60476953235633, lng: 39.10753805227597 };
            const mapOptions = {
                zoom: 12,
                center: latLng,
            };
            const map = new google.maps.Map(document.getElementById("map"), mapOptions);
            new google.maps.Marker({
                position: latLng,
                map: map,
                title: "Welcome to Jeddah Corniche",
            });
        }
        window.initMap = initMap;
    </script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&callback=initMap"
        async defer>
    </script>
</body>
</html>

Step # 4 : Access the .env file

Define the variable for your Google Maps API key.
GOOGLE_MAP_KEY="Your Google Map API Key here"

Step #5: Get the API key from Google Cloud.

Visit Google Cloud Console and follow these steps:
Create a new project (if you don't have one already).
Access the Credentials section.
Create credentials and choose the API Key option.
Set restrictions if needed.
You can find more details about usage limits.
link : https://developers.google.com/webmaster-tools/limits
Copy and paste the Key in .env
GOOGLE_MAP_KEY="You're Google Map API Key here"

Step # 6 : It's time to test.

Start the Laravel development server.
Command : php artisan serve.
Access below URL
127.0.0.1:8000

If you see the error, "This page can't load Google Maps correctly," it's because Google requires billing information, even for testing. You get $200 of free usage each month, and won’t be charged unless your usage exceeds this limit

Share this with friends!


"Give this post some love and slap that 💖 button as if it owes you money! 💸😄"
0

0 Comments

To engage in commentary, kindly proceed by logging in or registering