Charger un fichier js dans un composant

[Agrepe]

Bonjour,
J'ai besoin d'afficher une carte Google Map dans le fichier default.php d'une view d'un composant.
J'ai pris le code que propose Google avec une clé API que j'utilise par ailleurs (le temps de faire les tests)

https://developers.google.com/maps/d...tutorial?hl=fr

J'ai besoin de charger l'API Google. :
J'ai consulté cette documentation : https://docs.joomla.org/Adding_JavaScript/fr
J'ai tenté de charger le script avec la méthode décrite, mais cela provoque une erreur.

Voici le code Google:

<div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key="J ai mis ici ma clé API Google"&callback=initMap"async defer></script>

    <div id="map"></div> 

Qui saurait m’aiguiller ?

Cordialement.

Eric

[cavo789]

Pourquoi deux fois la div map ? En HTML, tu ne peux jamais avoir le même ID plus d'une fois.

Quand tu écris ceci :

<script src="https://maps.googleapis.com/maps/api/js?key="J ai mis ici ma clé API Google"&callback=initMap"async defer>

Tu as bien un truc du genre :

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXX&callback=initMap" async defer>

Dans ton exemple, il y a quatre double-guillemets du coup je me demande ce que tu as en réalité...

Note : si tu regardes ta console de debugging Javascript, tu aurais vu ces erreurs sans aucun doute.

[lesoutier]

En plus ces deux div ne servent à rien puisqu'elles sont ouvertes et refermées aussitot

<div id="map"></div> 

[Agrepe]

Bonjour,

Merci pour votre attention.

Deux fois <div id="map"></div> c'est juste une erreur de saisie dans la fichier exemple qui me sert à stocker temporairement mes codes, dans le projet la div n'y est bien qu'une seule fois.

Bien entendu que je mets la clé API déclarée chez Google. (Sans les guillemets vine entendu autour de "J ai mis ..." c'est juste pour souligner que j'utilise bien la clé APi Google
Je n'ai pas mise ici cette clé pour éviter qu'elle ne soit utilisée.

J'ai testé le code dans la console https://jsfiddle.net/api... et il fonctionne bien.

Voici exactement:


HTML

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

Script

<script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 43.397, lng: 3.844},
    zoom: 17
  });
}
</script>

CSS

#map {
  height: 100%;
}

Cela fonctionne dans la console https://jsfiddle.net/api...
Mais pas sur mon site.

Cordialement.

Eric

[Agrepe]

Bonjour,
Je me suis rendu compte que ce que j'avais préparé fonctionne quand je l'insère dans le fichier tmpl/default.php d'un module, mais ne fonctionne pas quand je l'insère dans tmpl/default.php d'un composant.
Est-ce logique ?
Cordialement.
Eric