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.

  1. 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)
    }
});


Tags

Recommended Posts

View All

Laravel 8 Import Export Excel & CSV File Example

Using the Maatwebsite/Laravel-Excel package, you will learn how to easily import and export Excel and CSV files in the Laravel 8 application while com...
Read More

Laravel Dropbox api File Upload example using league/flysystem-dropbox

Learn how to upload files to Dropbox using Laravel and league/flysystem-dropbox in this step-by-step tutorial. Improve your Laravel skills today!
Read More

Laravel Eloquent WHERE Like Query Example Tutorial

Laravel provides a query builder that helps us to deal with such a situation in MySQL. In this tutorial, you'll learn how to use a select where like q...
Read More

Laravel 9 Captcha Tutorial – Create Captcha in Laravel

A CAPTCHA is a challenge-response test used in computing to determine if a user is human. It is an abbreviation for the Completely Automated Public Tu...
Read More

Laravel 9 Socialite Login with LinkedIn Tutorial Example

How to use the Laravel socialite, Livewire, and Jetstream libraries to create a LinkedIn login system from scratch in Laravel
Read More