Laravel 5.4 Blade Javascript Google Maps - insert @foreach with multiple variables

Question

I am following this post , which perfectly shows how to scroll map markers using click templates in Javascript.

I would like to add the ability to scroll content. In other words, I would like to skip one meaning, in this case, the Prop with several parts, in this case, the coordinates and contents.

The code below is my last attempt. I can not make it work. Any idea where I could be wrong?

Thanks!

<script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: 38.7222524, lng: -9.139336599999979}, zoom: 12 }); var props = [ @foreach ($rooms as $room) coords = [ "{{ $room->lat }}", "{{ $room->lng }}" ], contents = [ "{{ $room->title }}" ], @endforeach ]; for (i = 0; i < props.length; i++) { var prop = new google.maps.LatLng(props[i][0], props[i][1]); var marker = new google.maps.Marker({ position: props.coords, map: map, }); var infoWindow = new google.maps.InfoWindow({ content: props.content, }); } marker.addListener('click', function(){ infoWindow.open(map, marker); }); var transitLayer = new google.maps.TransitLayer(); transitLayer.setMap(map); }; </script> <script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_MAPS_KEY&callback=initMap" async defer></script> 

Answer 1

this is much more javascript than Laravel, but your javascript syntax is wrong.

When your fragment is eventually evaluated, it becomes:

 var props = [ coords = [ ..., ...], contents = [ ... ], coords = [ ..., ...], contents = [ ... ], ... // continues @foreach ($room) ]; 

which is the wrong javascript syntax. Please check the source after loading the page and see what it really is and what you can do to fix the syntax. What you really need is to get an array of such objects:

 var props = [ { lat: '...', long: '...', title: '...' }, { lat: '...', long: '...', title: '...'}, ... ]; 

To get this, you would do:

 var props = [ @foreach ($rooms as $room) { lat: "{{ $room->lat }}", lng: "{{ $room->lng }}", title: "{{ $room->title }}" }, @endforeach ]; 

Then you need to iterate over the array like this ...

 for (i = 0; i < props; i++) { var prop = new google.maps.LatLng(props[i].lat, props[i].lng); var title = props[i].title; ...