Laravel Add Google Map or Define a Central Position in Google Map

Feb 04, 2023
Article · 3 min
595 words

Like (0)
Favorite (0)

Hello Artisans, today I'll show you how to add google map in your Laravel application or define a central position on a map. Google map nowadays a mandatory thing for a website. And also we need to show sometimes a central position on a map based on the user current location. So, let's see how we can easily integrate google map in our Laravel application.

Note: Tested on Laravel 9.19

Update .env file
Setup View
Output

Update .env File

Now, we'll add a new variable in .env file to set google map api key which we'll use later in the blade file. See below the source code

.env

GOOGLE_MAP_KEY=google_api_key

Setup View

Now we'll update our default blade file called welcome.blade.php which is come by default. Now open the file and replace it with the below codes.

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Add Google Map in Laravel - shouts.dev</title>

    <style type="text/css">
        #map {
            height: 400px;
        }
    </style>
</head>

<body>
<div class="container mt-5">
    <h2>Google Map in Laravel - shouts.dev</h2>
    <div id="map"></div>
</div>

<script type="text/javascript">
    function initMap() {
        const myLatLng = { lat: 23.81663586829542, lng: 90.36618138671278 };
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 5,
            center: myLatLng,
        });

        new google.maps.Marker({
            position: myLatLng,
            map,
            title: "Hello Mirpur!",
        });
    }

    window.initMap = initMap;
</script>

<script type="text/javascript"
        src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&callback=initMap" ></script>

</body>
</html>

Output

And finally, we're ready with our setup. It's time to check our output. Now go to http://127.0.0.1:8000, If everything goes well (hope so) we can see the below output.

That's it for today. I hope you've enjoyed this tutorial. You can also download this tutorial from GitHub. Thanks for reading. 🙂

Laravel