谷歌地图，在Laravel / JS的标记标签上显示数据

Question

The problem is when I pass the data controller to blade/JS, first I am converting it to JSON(because no other way) and then pass it to da javascript. But my label is not work properly. The script code is right below.

var estates = <?php echo json_encode($estates);?>

            function initMap()
            {
                var options =
                    {
                        zoom : 10,
                        center : {lat:34.652500, lng:135.506302}
                    };

                var map = new google.maps.Map(document.getElementById('map'), options);
                for (var i=0; i < estates.length; i++) {
                @foreach ($estates as $est)
                    var marker = new google.maps.Marker({
                            map: map,
                            label: estates.price,
                            position: {
                                lat: {{$est->lat}},
                                lng: {{$est->lng}}
                            }
                     });
                @endforeach
                }
            }

So if I try to pass price is like this {{$est->price}} then I get syntax token error. Because price is varchar with Japanese characters. So I need to convert it Json first and itetare it. But when I do that, there are no markers and label in the map. Just empty map, also there is no error in the console too? If I delete the JS for loop then markers are coming but no label...

Is anyone know what am I missing here?

Answer 1

Try to use new google.maps.LatLng() function:

        var estates = <?php echo json_encode($estates);?>
        //estates = <?php echo json_decode($estates);?>
        function initMap()
        {
            var options =
                {
                    zoom : 10,
                    center : {lat:34.652500, lng:135.506302}
                }

            var map = new google.maps.Map(document.getElementById('map'), options);

            for (var i=0;i<estates.length;i++){
            var latLng_ = new google.maps.LatLng(estates['lat'],estates['lng']);
            var marker = new google.maps.Marker({
                    map: map,
                    position: latLng_,
                    icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAy10Br9W1wWCSQNPc6f9CarvNEO4qqCg1BDbe7_mYZqHwXj3v',
                    label: estates['price']
                });


            var infoWindow = new google.maps.InfoWindow({
                content: estates['price']
            });

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