Laravel маркеры не отображаются на карте Google после загрузки в базу данных

Question

Я хочу отображать маркеры на карте Google после извлечения информации из базы данных. Я на самом деле использую laravel Framework для создания своего приложения. Карта Google загружается, но не показывает маркер. Моя консоль чистая, больше нет ошибок в коде.

ЗДЕСЬ МОЙ СКРИПТ. JS

function makeRequest(url, callback) {
var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
        callback(request);
    }
}
request.open("GET", url, true);
request.send();
}

function init() {

var map;

// Beni

var center = new google.maps.LatLng(0.496422, 29.4751);

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


var mapOptions = {
    zoom: 13,
    center:  center, //new google.maps.LatLng(0.496422, 29.4751),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map"), mapOptions);

makeRequest('/map-marker', function (data) {

     data = JSON.parse(data.responseText);

    for (var i = 0; i < data.length; i++) {
        displayLocation(data[i]);
    }
});
}
// displayLocation method

function displayLocation(location) {

var content = '<div class="infoWindow"><strong>' + location.code_du_suspect + '</strong>'
    + '<br/>' + location.etat_du_suspect + '</div>';

if (parseInt(location.latitude) === 0) {
    geocoder.geocode({'etat_du_suspect': location.etat_du_suspect}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {

            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: location.code_du_suspect
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            });
        }
    });
} else {
    var position = new google.maps.LatLng(parseFloat(location.latitude), parseFloat(location.longitude));
    var marker = new google.maps.Marker({
        map: map,
        position: position,
        title: location.etat_du_suspect
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(content);
        infowindow.open(map, marker);
    });
}
}

ЗДЕСЬ КОНТРОЛЛЕР

 public function index()
{
    $alerte = alertes::all();

   // $data_alerte = json_encode($alerte);

    return view('pages.alertes.alertes'); //->with('data_alerte', $alerte);



//        $alertes = DB::table('alertes')->get();
//        return view('pages.alertes.alertes',compact('alertes'));
    }

public function mapMarker(){
    $alertes = alertes::all();
    $map_markers = array();
    foreach($alertes as $key => $alerte){
        $map_markers[]=(object)array(
            'code_du_suspect' => $alerte->code_du_suspect,
            'etat_du_suspect' => $alerte->etat_du_suspect,
            'latitude' => $alerte->latitude,
            'longitude' => $alerte->longitude
        );
    }
   return response()->json($map_markers);
   // return view('pages.alertes.alertes')->with('data_alerte', $data_alerte);
}

ЗДЕСЬ ВИД

       </div>
        <div class="card-body">
            <div id="map" style="width:100%;height:400px;"></div>
        </div>
    </div>
    </div>
</div>

    @endsection()

@section('custom-script')
<script type="text/javascript" src="{{asset('assets')}}/map/afficher_alertes.js"></script>
<script  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnyJJ2gorvX0rsuhBJLNUsfyioWSSep2Q&callback=init"></script>

---

Я сделал еще один тест и обнаружил, что, возможно, проблема с fucntion displayLocation