Laravel 5.4 Blade Javascript Google Maps - 複数の変数を持つ@foreachを挿入する

Question

私はこれを次のようにしています。post Javascriptでブレードテンプレートを使用してマップマーカーをループする方法をすばらしい方法で示しています。

コンテンツをループする機能も追加したいと考えています。言い換えれば、私は、この場合は、複数の部分、この場合は、coordsと内容で、この場合は、1つの値をループしたいと思います。

以下のコードは私の最新の試みです。私はそれを働かせることはできません。私が間違っているかもしれないどんな考え？

ありがとうございます！

<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

これはLaravelであるよりもはるかにjavascriptのですが、それは言われて、あなたのjavascriptの構文が正しくありません。

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

間違ったJavascriptの構文である：あなたのスニペットは、最終的にそれがなると評価し

。ページを読み込んだ後にソースを確認し、実際に何があって、構文を修正するために何ができるかを見てください。何が本当にしたいことはそうのようなオブジェクトの配列で終わることです：

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

これを取得するには、どうなる：

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

あなたはそのようにのような配列を反復処理する必要があります。 ..

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