Googleマップのsymfony動的ワイルドカードinfowindow

Question

Symfony3には、データベースから注入されたいくつかの場所を示すGoogleマップの小さなアプリケーションがあります。 私が達成しようとしているのは、Googleマップのインフォボックス内の各ロケーションページへのリンクを配置することです。場所ページへ ワイルドカードはこれです：

location/{id} 

ので<a>タグhrefは、次のようになります。

<a href="{{ path('location', {'id': location.id }) }}"> 

これは、すべての件のデータをJSONです：

"[ 
    {"id":72,"name":"Stintino","lat":"40.94013320","lng":"8.223588900000"}, 
    {"id":73,"name":"Cagliari","lat":"39.22384110","lng":"9.121661300000"},  
    {"id":74,"name":"La maddalena","lat":"41.21655380","lng":"9.404712200000"}, 
    {"id":75,"name":"Sassari","lat":"40.72592690","lng":"8.555682600000"},  
    {"id":76,"name":"Oristano","lat":"39.90618200","lng":"8.588386300000"},  
    {"id":77,"name":"Spiaggia-del-oetto","lat":"39.20861110","lng":"9.169166700000"} 
]" 

そして、小枝テンプレート内の私のJavaScriptコード：

{% extends 'base.html.twig' %} 
{% block content %} 
{% block javascripts%} 
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script> 
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script> 
<script type="text/javascript">  


    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), 
     disableDefaultUI: true, 
     scrollwheel: false, 
     draggable: true, 
    }); 
    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, 
      title: locations[i]['name'] 
     }); 
     var idloc = locations[i]['id']; 
     var contentString = Routing.generate("location", { id: idloc }); 
     var url = '<a href="'+contentString+'">link</a>'; 
     alert(url); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(url); 
      infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 

</script> 
{% endblock %} 
<div id="wsMap" style="width: 100%; height:800px"></div> 

{% endblock %} 

infoWindows内のリンクを正しく表示するために、すべての文字列と変数をどのように連結することができますか？

EDIT

FOSJsRoutingBundleとrouting.generate機能を追加した後、私は、マップのすべての情報ウィンドウで生成された唯一の最後のルートを取得します。しかし、警告ウィンドウで私はすべてのルートを取得！ （上記のコードを参照）。 JavaScriptのスキルは残念ながら非常に悪いです...

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.