CODEWITHSUNDEEP
javascriptphpjsongoogle-mapssymfony
user5322588
user5322588

Reputation:

Populate google maps from symfony 3 application in JSON

I am trying to populate a google map from the database, using doctrine and symfony3. Basically I have a select in my entity repository to get the name , latitude and longitude of all the locations present.

showMarkersAction looks like this :

/**
 * @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));

}

output of $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 %}

I get an error saying

An exception has been thrown during the rendering of a template ("Notice: Array to string conversion") in default/discover.html.twig .

How can I pass the json output to the javascript variable locations ? or would be great if you can lead me to the right direction ! thanks

Upvotes: 2

Views: 1678

Answers (1)

user5322588
user5322588

Reputation:

So that's the discover.html.twig modified :

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

Upvotes: 1

Related Questions