Forum : Chargement de script après l'api google maps v3

Bonjour,

J'ai un probleme avec un script Jquery.

Mon code me permet de récuperer la localisation de l'internaute, et le remplace dans un lien qui à la classe (.ma-pos). Ce script fonctionne très bien sur mes pages. Il remplace bien le mot "votreposition" par la position de l'internaute. (en local)
Malheuresement il ne fonctionne pas sur les liens contenu dans les markeur google maps. j'obtient une erreur => Uncaught TypeError: Cannot read property 'replace' of undefined. il n'arrive pas à trouver mon lien avec ma classe (.ma-pos)

Voici le code du script.

jQuery(document).ready(function($){

    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(geoSuccess, geoError);

        function geoSuccess(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            jQuery(".ma-pos").attr("href",
            jQuery(".ma-pos").attr('href').replace('votreposition', lat+','+lng)
        );
        }

        function geoError() {
            alert("Geocoder failed.");
        }

    }else{
        alert("La geolocalisation n'est pas supporté");
    }

});

Donc j'aimerai bien obtenir le changement de lien dans les markeurs de la carte google maps ! J'ai remarquer que mon script se charge avant l'affichage des markeur. Je me demande si l'erreur ne viens pas de la =>
La carte google se charge (googlemaps.js) / Ensuite mon script qui cherche les liens (localisation.js) / Et apres les markeur ou sont contenus les liens. (marker.js)

J'aimerai donc savoir si il y a une solutions pour chargé mon script après le chargement des markeurs ? ou trouver une solution pour que ça fonctionne tout court ^^

Merci à vous !

betaWeb

Salut,

L'erreur est plutôt claire : Cannot read property 'replace' of undefined
L'élément sur lequel tu essayes de faire un replace n'existe tout simplement pas, ou alors l'attribut href n'est pas présent.

var $elm = jQuery(".ma-pos");

if (!$elm || !$elm.length) return;

var href = $elm.attr('href');

if (!href || !href.length) return;

var coords = lat + ',' + lng;

href = href.replace('votreposition', coords);

$elm.attr("href", href);

Bamwempan1

Auteur

Bonjour, merci pour ta réponse rapide.

Je sais très bien qu'il ne trouve pas mon élèment, mais le problème c'est que cet élèment existe bien dans le code source. Il est juste crée après l'appelle du script en question, du coup il ne le trouve pas. (enfin je suppose).

Ce que tu as fait permet juste de ne plus avoir d'erreur, mais mon lien n'est toujours pas le bon. Je recherche une manière de pouvoir changer le lien dans la carte google maps.
Peut etre que c'est un autre DOM ? (je suis tout nouveau dans le code JS / Jquery).

betaWeb

Il faut donc appeler ton script APRES avoir créé l'élement. A quel endroit appelles-tu tes scripts ? Dans le head ou juste avant la fermeture du body ?

Bamwempan1

Auteur

Juste avant la fermeture du body. mais si tu regarde bien la photo, mes script son appellé dans le bonne ordre, le problème viens de l'api Google qui, malgrès la carte chargé, charge les marker après le reste des script, et donc après mon script.

Regarde sur cette image on vois bien le déroulement des chargements des scripts.

betaWeb

Tu peux nous montrer comment tu places tes marqueurs sur la carte ?

Bamwempan1

Auteur

Via le plugin ACF de wordpress.

<?php 
$articles = get_posts( array(
   'post_type' => 'article', 
   'posts_per_page' => -1
));

if( !empty($articles) ): ?>

<div class="acf-map">

  <?php foreach($articles as $article): ?>
    <?php
     $titre = get_the_title($article->ID);
     $img_src = get_the_post_thumbnail($article->ID, 'thumbnail');
     $permalink = get_the_permalink($article->ID);
     $location = get_field('maps',$article->ID);
     $lat = $location['lat'];
     $lng = $location['lng'];
     $url = 'https://www.google.fr/maps/dir/votreposition/';

     if( !empty($location) ): ?>

     <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
         <?php echo $img_src; ?>;
       <h4><a href="<?php echo $permalink; ?>" rel="bookmark"> <?php echo $titre; ?></a></h4>
       <p class="address"><?php echo $location['address']; ?></p>
       <span><a class="btn btn-success btn-sm ma-pos" href="<?php echo $url.$lat.','.$lng;?>" target="_blank">Emmene moi !</a></span>
       <span><a href="<?php echo $permalink; ?>" class="btn btn-sm btn-info">Voir le article</a></span>
     </div>

    <?php endif; ?>
  <?php endforeach; ?> 

</div> 

<?php endif; ?>

betaWeb

Donc c'est peut-être de ce côté là qu'il faut voir : Wordpress.

Bamwempan1

Auteur

Je ne pense pas que ça soit lier à wordpress. Car le script google maps est appellé au bon moment, ce sont les api de google qui sont appelé après. Et j'aimerai savoir si on peux charger un script après l'api :/. Merci de ton aide en tout cas ! :)

betaWeb

Beh je pense que tu devrais jeter un oeil à l'API de Google Maps, tu dois avoir une méthode avec des promises (ou simple callback) qui devraient résoudre le problème.
Je me souviens avoir déjà eu à faire un truc similaire : récupérer les adresses de biens immobiliers, en déterminer leurs coordonnées et les placer sur une carte Google Maps, et le tout depuis un thème WP. Et ça n'avait pas été très compliqué au final. Mais ça date d'il y a 3-4 ans donc honnêtement je ne me rappelle plus de ce que j'avais fait. Et puis l'API a du changer depuis.

Bamwempan1

Auteur

Super merci pour tes précisions je vais aller y jetter un oeil. Et voir ce que sont les promises ou callback (Je n'y connais vraiment rien en jquery x) ).

betaWeb

C'est du Javascript, pas du jQuery (https://www.grafikart.fr/formations/debuter-javascript/decouverte-jquery) ;)
Pour les promises : https://www.grafikart.fr/tutoriels/javascript/promise-async-await-875

Bamwempan1

Auteur

Merci ! je go voir ça de suite

Chargement de script après l'api google maps v3

12 réponses