How To Integrate Google Maps in Laravel

3 min readSep 9, 2022

How To Integrate Google Maps in Laravel

A number of ways are available through the Google Maps JavaScript API to build maps for web applications. We will incorporate Google Maps into the Laravel project step-by-step in this tutorial.

Create a new Laravel project

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

Create a view and add the following code

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>

It’s important to remember to change your Google API Key.

Markers can be simply added and removed. Additionally, you can add more characteristics to the marker object based on your needs.

Add a marker

const marker = new google.maps.Marker(
    position: 
        lat: 28.625043,
        lng: 79.810135
    ,
    label:  color: "white", text: "P4" ,
    draggable: true,
    map
);
markers.push(marker);

2. Remove a marker

Remove P4 marker

const index = markers.findIndex(marker => marker.label.text == "P4");
if(index != -1) 
    markers[index].setMap(null);
    markers.splice(index, 1);

3. Update marker properties

Update P4 marker

const index = markers.findIndex(marker => marker.label.text == "P4");
if(index != -1) 
    markers[index].setOptions( ...markers[index], position:  lat: 28.625043, lng: 79.810135  );

Set marker properties using setOptions(options).

Set the marker position using setPosition(latlng).

Set a marker label with setLabel(label).

show/hide a marker by using setVisible(boolean).

Create a controller and add the following code

php artisan make:controller MapController<?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'));

Create Route

routes/web.php

<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Finally open URL in the browser.

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

Reverse Geocoding

const geocoder = new google.maps.Geocoder();
const latlng = new google.maps.LatLng(28.625043, 79.810135);
const request = 
    latLng: latlng

geocoder.geocode(request, results => 
    if(results.length) 
        console.log(results[0].formatted_address)
    
);