Как сделать маркер для каждого пользователя, получающего из базы данных?

Question

У меня есть проект Laravel, который работает с картами Google. У меня есть пользовательская модель, которая содержит эти два поля: lat, long. Я хочу сделать маркер для каждого пользователя с InfoWindow.

Вот мой код:

web.php:

Route::get('/',function (){
    $users = \App\User::all() ;
    return view('map',compact(['users']));
}) ;

map.blade.php:

<script>
        var map ;
        function initMap() {

            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -23, lng: 150.644},
                zoom: 8
            });

            @forEach($users as $user)

                var lat = parseFloat({{$user->lat}});
                var lng = parseFloat({{$user->long}});

                var content = "{{$user->name}}" ;
                var infoWindow = new google.maps.InfoWindow(
                    {
                        content:content
                    }
                );

                var urlurl = {lat:lat,lng:lng} ;
                var marker = new google.maps.Marker(
                    {
                        position:urlurl ,
                        map:map
                    }
                ) ;

                marker.addListener('click',function () {
                    infoWindow.open(map,marker);
                });

            @endforeach
        }
    </script>

Но когда я запускаю это, он просто показывает мне вставленный маркер последнего пользователя.

Как я могу сделать ровно один маркер для каждого пользователя?

Answer 1

Попробуйте использовать закрытие

<script>
    var map ;
    function addMyListener(aMarker, aInfoWindow){

            aMarker.addListener('click',function () {
                // Change marker to aMarker
                aInfoWindow.open(map,aMarker);
            });

    }

    function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -23, lng: 150.644},
            zoom: 8
        });

        @forEach($users as $user)

            var lat = parseFloat({{$user->lat}});
            var lng = parseFloat({{$user->long}});

            var content = "{{$user->name}}" ;
            var infoWindow = new google.maps.InfoWindow(
                {
                    content:content
                }
            );

            var urlurl = {lat:lat,lng:lng} ;
            var marker = new google.maps.Marker(
                {
                    position:urlurl ,
                    map:map
                }
            ) ;

            addMyListener(marker, infowindow);

        @endforeach
    }
</script>