How to send PHP data to Javascript file in Laravel (Google maps API)

Question

Im having trouble with my pagespeed in Laravel, because of the javascript in my page view.

Im trying to make my pagespeed better by not having any javascript on the page view, and instead in a seperate search.js file.

Im generating a map with google maps, and putting about 100 markers on the map. The data depending on where the markers should be placed are stored in a MySQL database (as part of the users information).

Right now im having a script on the page within a foreach loop on the page for each user passed to the view. This makes the page source code extreamly long, as it goes trough the loop 100 times and displayed all this javascript in the source code.

Below is only an example of my code to get the jist of what I mean, whole code is displayed here.

<script>
@foreach($usersall as $user)
...

var latlng{{ $user->id }} = {lat: {{ $user->lat }} , lng: {{ $user->long }} };

var marker{{ $user->id }} = new google.maps.Marker({
  map: map,
  clickable : true,
  icon: '/assets/img/pin_marker_open.png',
  position: latlng{{ $user->id }}
});

markers.push(marker{{ $user->id }});

...
@endforeach
</script>

I cant do that in my search.js file, because I dont have the data from $usersall.

So here goes my question: How do I pass the PHP variables for a user to the search.js file, so I can display all the markers on the map without having any of the javascript in the page view itself?

If this code is in a <script> tag in a .blade.php file, then you can use {{ }}, but if it's in a standalone .js file, you can't use that syntax. As suggested below, setting users in a var before loading search.js would work, but you'd have to adjust your variable names and remove that syntax. — Tim Lewis
– Tim Lewis, Commented Aug 27, 2018 at 19:38

Lance Pioch · Accepted Answer · 2018-08-27 19:33:57Z

1

This isn't the best way to do this, but it's the most direct:

<script>
    var users = {{ $usersall }};
</script>

The default output of a collection (when echoed) will be cast to a JSON string. Therefore you can directly assign this to a variable in JS.

However, ideally you should retrieve this value via AJAX and pass it into the function separately.

answered Aug 27, 2018 at 19:33

Lance Pioch

1,1676 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carlos Salazar · Accepted Answer · 2018-08-27 19:39:14Z

1

If what you want is to get the values of the variables of the php inside your search.js as far as i know you can't.

I recommend to use ajax for this purpose, if that is not an option you could make a loop of your users in your html to hiddien fields like

@foreach($usersall as $user)
    <input type="hidden" class="user" value="{{$user}}">
    //if fails try encoding json_encode($user) or json_decode($user) i don't rememer
@endforeach

And then loop in your js file you can get all the elements with the user class and loop them to get the value

answered Aug 27, 2018 at 19:39

Carlos Salazar

1,9186 gold badges29 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to send PHP data to Javascript file in Laravel (Google maps API)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest