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

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

Table of Contents

  1. Update .env file
  2. Setup View
  3. 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


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.

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

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

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

<div class="container mt-5">
    <h2>Google Map in Laravel -</h2>
    <div id="map"></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,
            title: "Hello Mirpur!",

    window.initMap = initMap;

<script type="text/javascript"
        src="{{ env('GOOGLE_MAP_KEY') }}&callback=initMap" ></script>



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

Google Map in Laravel

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