Laravel Add Multiple Markers in Google Map

Hello Artisans, today I'll show you how to add multiple markers Google map in your Laravel application. Nowadays Google Map is a mandatory thing for a website. And also we need to show multiple markers on a map based on where the shop/restaurant is situated. So, let's see how we can easily integrate multiple markers in 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 the .env file to set the 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 with 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>

    $locations = [
                ['Khilkhet', 23.82973741600876, 90.42004192480192],
                ['Baridhara', 23.808117739943608, 90.44537670239676],
                ['300 Fit ', 23.836538363288035, 90.4658279948394],
                ['Tongi', 23.901545202737925, 90.40824277591372],
                ['Dhamrai', 23.914649046324804, 90.21735533044152],
                ['Manikganj', 23.86481597833292, 90.00501020845859],
<script type="text/javascript">
    function initMap() {
        const myLatLng = { lat: 23.81663586829542, lng: 90.36618138671278 };
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 10,
            center: myLatLng,

        var locations = {{ Js::from($locations) }};

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i  ) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
          , marker);
            })(marker, i));


    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.

Multiple Markers in a Map

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