Salv Ric Salv Ric - 2 months ago 24
Twig Question

Symfony dynamic wildcards in google maps infowindow

I have a small application in Symfony3 with a google map showing some locations injected from the database.
What I am trying to achieve is to place a link to each location page inside the infoWindows of google maps.
The wildcard to the location pages is this :

location/{id}


So the
<a>
tag
href
should be the following :

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


This is the JSON with all the datas :

"[
{"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"}
]"


And my javascript code inside the twig template :

{% 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 %}


Do you know how I can concatenate all the string plus the variable to render correctly the link inside the infoWindows ?

EDIT

After adding the FOSJsRoutingBundle and the routing.generate function I get only the last route generated in all infowindow of the map. But on the alert window I get all the routes ! (see code edited above ).
My javascript skills are very poor unfortunately...

Answer

Finally I managed to solve the issue, I m using the FOSJsRoutingBundle to expose the symfony routes to javascript and basically I had to add the variable url to the javascript listener function. So this is the working code for me :

{% 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+'">'+ locations[i]['name'] +'</a>';
        google.maps.event.addListener(marker, 'click', (function(marker, i, url) {
        return function() {
            infowindow.setContent(url);
            infowindow.open(map, marker);
            }
        })(marker, i, url));
    }

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

{% endblock %}
Comments