How To Integrate Google Maps in Laravel 2024

3 min readJul 20, 2024

Integrating Google Maps into a Laravel application involves several steps, including setting up the Laravel project, creating views and controllers, and adding the necessary JavaScript for Google Maps. Below is a detailed guide to accomplish this:

1. Create a New Laravel Project

First, create a new Laravel project using Composer:

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

2. Create a View

Create a new Blade template for the map view. Add the following code in resources/views/map.blade.php:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .text-center {
                text-align: center;
            }
            #map {
                width: 100%;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <h1 class="text-center">Laravel Google Maps</h1>
        <div id="map"></div>

        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async></script>
        <script>
            let map, activeInfoWindow, markers = [];

            /* ----------------------------- Initialize Map ----------------------------- */
            function initMap() {
                map = new google.maps.Map(document.getElementById("map"), {
                    center: {
                        lat: 28.626137,
                        lng: 79.821603,
                    },
                    zoom: 15
                });

                map.addListener("click", function(event) {
                    mapClicked(event);
                });

                initMarkers();
            }

            /* --------------------------- Initialize Markers --------------------------- */
            function initMarkers() {
                const initialMarkers = <?php echo json_encode($initialMarkers); ?>;

                for (let index = 0; index < initialMarkers.length; index++) {
                    const markerData = initialMarkers[index];
                    const marker = new google.maps.Marker({
                        position: markerData.position,
                        label: markerData.label,
                        draggable: markerData.draggable,
                        map
                    });
                    markers.push(marker);

                    const infowindow = new google.maps.InfoWindow({
                        content: `<b>${markerData.position.lat}, ${markerData.position.lng}</b>`,
                    });
                    marker.addListener("click", (event) => {
                        if(activeInfoWindow) {
                            activeInfoWindow.close();
                        }
                        infowindow.open({
                            anchor: marker,
                            shouldFocus: false,
                            map
                        });
                        activeInfoWindow = infowindow;
                        markerClicked(marker, index);
                    });

                    marker.addListener("dragend", (event) => {
                        markerDragEnd(event, index);
                    });
                }
            }

            /* ------------------------- Handle Map Click Event ------------------------- */
            function mapClicked(event) {
                console.log(map);
                console.log(event.latLng.lat(), event.latLng.lng());
            }

            /* ------------------------ Handle Marker Click Event ----------------------- */
            function markerClicked(marker, index) {
                console.log(map);
                console.log(marker.position.lat());
                console.log(marker.position.lng());
            }

            /* ----------------------- Handle Marker DragEnd Event ---------------------- */
            function markerDragEnd(event, index) {
                console.log(map);
                console.log(event.latLng.lat());
                console.log(event.latLng.lng());
            }
        </script>
    </body>
</html>

Note: Replace YOUR_API_KEY with your actual Google Maps API key.

3. Create a Controller

Generate a new controller using Artisan:

php artisan make:controller MapController

Add the following code to app/Http/Controllers/MapController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MapController extends Controller
{
    public function index()
    {
        $initialMarkers = [
            [
                'position' => [
                    'lat' => 28.625485,
                    'lng' => 79.821091
                ],
                'label' => [ 'color' => 'white', 'text' => 'P1' ],
                'draggable' => true
            ],
            [
                'position' => [
                    'lat' => 28.625293,
                    'lng' => 79.817926
                ],
                'label' => [ 'color' => 'white', 'text' => 'P2' ],
                'draggable' => false
            ],
            [
                'position' => [
                    'lat' => 28.625182,
                    'lng' => 79.81464
                ],
                'label' => [ 'color' => 'white', 'text' => 'P3' ],
                'draggable' => true
            ]
        ];
        return view('map', compact('initialMarkers'));
    }
}

4. Define Routes

Add a route to routes/web.php:

<?php

use App\Http\Controllers\MapController;
use Illuminate\Support\Facades\Route;

Route::get('/', [MapController::class, 'index']);

5. Access the Application

Finally, open the Laravel application in your browser:

http://localhost/laravel-google-maps/public

Additional Marker Management

(a) Add a Marker

(a) Add a Marker
javascript
Copy code
const marker = new google.maps.Marker({
    position: {
        lat: 28.625043,
        lng: 79.810135
    },
    label: { color: "white", text: "P4" },
    draggable: true,
    map
});
markers.push(marker);
(b) Remove a Marker
javascript
Copy code
const index = markers.findIndex(marker => marker.label.text == "P4");
if(index != -1) {
    markers[index].setMap(null);
    markers.splice(index, 1);
}
(c) Update Marker Properties
javascript
Copy code
const index = markers.findIndex(marker => marker.label.text == "P4");
if(index != -1) {
    markers[index].setOptions({ ...markers[index], position: { lat: 28.625043, lng: 79.810135 } });
}

setOptions(options) - Set marker properties.
setPosition(latlng) - Set marker position.
setLabel(label) - Set marker label.
setVisible(boolean) - Show/hide a marker.