[FIXED] How to Display Multiple Gmaps Markers in Laravel 8?

Issue

I want to show multiple gmaps markers on dashboard. This marker data, taken from the database. I've coded like this, but it still doesn't work.

Controller

public function index()
{
    $markers = Report::select('location','latitude','longitude')->get()->toArray();
    
    // dd($markers);
    return view('dashboard', compact('markers'));
}

and in blade, i made like this. This I got the reference from google documentation

Blade

@section('styles')
<style>
    /* Set the size of the div element that contains the map */
    #map {
    height: 400px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
    }
</style>
<script>

function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 10,
        center: { lat: -6.261493, lng: 106.810600 },
});

setMarkers(map);
}

const locations = <?php print_r(json_encode($markers)) ?>;

function setMarkers(map) {

const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
};

const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
};

for (let i = 0; i < locations.length; i++) {
    const location = locations[i];

    new google.maps.Marker({
    position: { lat: parseFloat(location[1]), lng: parseFloat(location[2]) },
    map,
    icon: image,
    shape: shape,
    title: location[0],
    zIndex: location[3],
    });

    console.log(locations[i]);
    }
}

</script>

@endsection

...
...
<div class="col-12">
    <div class="card">
         <div class="card-body">
               <div id="map"></div>
         </div>
    </div>
</div>
...
...

If I look in the console, the output is shown like this.

Console.log

How to fix it? Thank You

Solution

SOLVED. this case can be solved by using collection map in controller

    public function index()
    {
        $markers = Report::select('location','latitude','longitude')->get();

        $markers = $markers->map(function ($item, $key){
            return [$item->location, $item->latitude, $item->longitude];
        });

        return view('dashboard', compact('markers'));
    }

Answered By - Hilmi Hidayat