Google Map API ne s'affiche pas

Bonjour,

Pour mon projet, j'aurais souhaite inserer une Google Map sur mon layout grace a Symfony. Et pour afficher certaines choses, j'ai besoin de donnees contenues dans un tableau, que je recupere depuis ma base de donnees, et donne a javascript avec un json_encode. Jusque la ca va. Sauf qu'apres avoir corrige toutes mes erreurs, je constate que la map ne s'affiche toujours pas. Aucune erreur ne se fait plus dans la console et ca fonctionne tres bien en dehors de Symfony. Je precise aussi qu'il rentre bien dans la fonction initMap().
Donc, est-ce que quelqu'un saurait ou se situe le probleme exactement ? Est-ce que c'est Symfony qui n'est pas fan de la gMap ? Une manipulation est-elle a faire pour faire fonctionner des API ?

Je vous laisse mon code au cas ou :

{% extends "GlaceTestBundle::layout.html.twig" %}
 
{% block title %}
Accueil - {{ parent() }}
{% endblock %}
 
<div class="clearfix">
  <div id="map"></div>
</div>
 
{% block javascripts %}
<script>
   
  var cascade = {};
   
  var cascade = '{{ cascade | raw }}';
   
  console.log(cascade);
 
  var map;
 
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 45.934173765303, lng: 7.0985534404755},
      zoom: 8
    });
     
    console.log('init');
 
    var cascademap = {};
 
    for(i=0; i<cascade.length; i++){
 
      cascademap[i] = {
        center: new google.maps.LatLng(cascade[i]['latitude'], cascade[i]['longitude'])
      }
 
      if (cascade[i]['code'] == 1){
        cascademap[i]['color'] = '#FF0000'
      } else if(cascade[i]['code'] == 2){
        cascademap[i]['color'] = '#FF8000'
      } else if(cascade[i]['code'] == 3){
        cascademap[i]['color'] = '#0080FF'
      } else if(cascade[i]['code'] == 4){
        cascademap[i]['color'] = '#800080'
      } else {
        cascademap[i]['color'] = '#FFF'
      }
 
    }
 
    for (var c in cascademap) {
      var cascadeOptions = {
        strokeColor: cascademap[c].color, //couleur
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: cascademap[c].color,
        fillOpacity: 0.35,
        map: map,
        // Centre : coordonnée de la cascade
        center: cascademap[c].center,
        radius: 20000
      };
      var cascadeCircle = new google.maps.Circle(cascadeOptions);
    }
 
    setMarkers(map, cascade, cascadeCircle);
 
  }
 
  // Fonction pour déclencher une info-bulle au clic
  function setMarkers(map, locations, circle) {
    for (var i = 0; i < locations.length; i++) {
      var cascades = locations[i];
      var myLatLng = new google.maps.LatLng(cascades['latitude'], cascades['longitude']);
      var infoWindow = new google.maps.InfoWindow();
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: cascades['name'],
        animation: google.maps.Animation.DROP,
      });
      (function(i) {
        google.maps.event.addListener(marker, "click", function() {
          // Au clic sur un cercle, récupération des infos php liées
          // Et affichage sur la page
          var cascades = locations[i];
 
          infoWindow.close();
          infoWindow.setContent("<div id='boxcontent' style='<a>font-family:Calibri</a>'><strong style='<a>color:green</a>'>"
                                + cascades['name'] +
                                "</strong><br/><span style='<a>font-size:12px;color:#333</a>'>" + cascades['statut'] + "</span></div>"
                               );
          infoWindow.open(map, this);
          document.getElementById('lieu').textContent = 'Lieu : ' + cascades['name']; document.getElementById('statut').textContent = 'Statut : ' + cascades['statut']; document.getElementById('alert').textContent = cascades['message'];
        });
      })(i);
    }
  }
 
</script>
<script src="<a href="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuZZ1ZHMB8j0bXsWxy5wSPEcyW2WUvfIA&callback=initMap" rel="nofollow">https://maps.googleapis.com/maps/api/js?key=AIzaSyDuZZ1ZHMB8j0bXsWxy5wSPEcyW2WUvfIA&callback=initMap</a>"
        async defer></script>
{% endblock %}
 
{% endblock %}

Merci d'avance pour vos reponses.[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par Tsukasa (24 Nov 2016 - 09:34)