JSFのsymfony 3アプリケーションからgoogle mapsにデータを入力してください

Question

私はdoctrineとsymfony3を使って、データベースからGoogleマップを読み込もうとしています。 基本的には、存在するすべての場所の名前、緯度、経度を取得するために、自分のエンティティリポジトリにselectがあります。

showMarkersActionは次のようになります。

/** 
* @Route("/discover", name= "discover" ) 
*/ 
public function showMarkersAction() 
{ 
    $em = $this->getDoctrine()->getManager(); 
    $locations = $em->getRepository('AppBundle:Location')->findLatLng(); 


    $json = json_encode($locations); 
    dump($json); 
    return $this->render('default/discover.html.twig', array('locations'=>$json)); 

} 

$のJSONの出力：

enter code here 

"[ 
    {"name":"Stintino","lat":"40.94013320","lng":"8.223588900000"},  
    {"name":"Cagliari","lat":"39.22384110","lng":"9.121661300000"}, 
    {"name":"La maddalena","lat":"41.21655380","lng":"9.404712200000"},  
    {"name":"Sassari","lat":"40.72592690","lng":"8.555682600000"}, 
    {"name":"Oristano","lat":"39.90618200","lng":"8.588386300000"} 
]" 

discover.html.twig：

{% extends 'base.html.twig' %} 
{% block content %} 

    <script type="text/javascript"> 


     var locations = {{locations}} ; 

     function initMap(){ 

      var map = new google.maps.Map(document.getElementById('wsMap'), { 
       zoom: 10, 
       center: new google.maps.LatLng(40.0562194, 7.8577928) 
      }); 

      var marker, i; 

      for (i = 0; i < locations.length; i++) { 

       arrayloc = locations[i].split(","); 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(arrayloc[1], arrayloc[2]), 
        map: map 
       }); 
      } 
     } 


    </script> 
<div id="wsMap" style="width: 100%; height:500px"></div> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEdevajP8g5iulqWBPM3UXUTtrzjJ8rDs&callback=initMap&libraries=places"> 
</script> 
{% endblock %} 

私は

を言ってエラーが出ます

default/discover.html.twigのテンプレート （「通知：文字列変換への配列」）のレンダリング中に例外がスローされました。

json出力をjavascript変数の場所に渡すにはどうすればよいですか？あなたが私を正しい方向に導くことができれば素晴らしいでしょう！ おかげ

Answer 1

だから、修正discover.html.twigです：

{% extends 'base.html.twig' %} 
{% block content %} 
<script type="text/javascript">  

function initMap(){ 
    var locations = JSON.parse('{{ locations | raw }}'); 
    console.log(locations); 
    var map = new google.maps.Map(document.getElementById('wsMap'), { 
     zoom: 7, 
     center: new google.maps.LatLng(40.0562194, 7.8577928) 
    }); 
    var infowindow = new google.maps.InfoWindow(); 
    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']), 
      map: map 
     }); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i]['name']); 
      infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
}  

</script> 
<div id="wsMap" style="width: 100%; height:500px"></div> 

{% endblock %}