jquery load et api google maps

Par AaFrederic Husson, il y a 8 ans

Javascript

j'utilise ajax pour afficher une page distance avec l'api google maps et je me rend conte que la page bug elle s'affiche avant la fin du chargement

j'apelle ma page avec ce code jquery:

$(document).ready(function() { $("body").on('click', '.distances',function(event) { event.preventDefault(); var url = $(this).prop('href'); $("#fiche-1").load(url); }); });

j'aimerais attendre avant l'affichage ou bien afficher une fois que c'est totalement chargé si quelqu'un pouvais m'aider?

7 réponses

Lartak, il y a 8 ans

Bonsoir.

j'aimerais attendre avant l'affichage ou bien afficher une fois que c'est totalement chargé

Pourrais-tu être plus précis ?
Et puis, tu ne nous dis pas si tu as des erreurs en retours dans la console, ni même de ce qui se passe actuellement, pour faire simple, tu ne nous dit pas ce que tu as en retour.

AaFrederic Husson, il y a 8 ans

J'appel donc une page qui m'affiche la distance entre deux villes donc une map avec les deux pointeurs et un trait bleu pour indiquer le trajet parfois la map s'initialise s'eulement ou bien la map se charge mais il manque le trait bleu ou alors elle est complete ce n'est pas toujours le même affichage

voici le code de la page distance

<div id="map"> <p>Veuillez patienter pendant le chargement de la carte...</p> </div> <input type="hidden" name="origin" id="origin" value="<?php echo $ma_ville; ?>"> <input type="hidden" name="destination" id="destination" value="<?php echo $profil_ville; ?>"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=fr&key=AIzaSyBnGas2__Wr6Aup2Iu_5awuqGPf1LTCPM8"></script> <script> var map; var panel; var initialize; var calculate; var direction; initialize = function(){ var latLng = new google.maps.LatLng(50.6371834, 3.063017400000035); // Correspond au coordonnées de Lille var myOptions = { zoom : 14, // Zoom par défaut center : latLng, // Coordonnées de départ de la carte de type latLng mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN maxZoom : 20 }; map = new google.maps.Map(document.getElementById('map'), myOptions); panel = document.getElementById('panel'); var marker = new google.maps.Marker({ //position : latLng, //map : map, //title : "Lille" //icon : "marker_lille.gif" // Chemin de l'image du marqueur pour surcharger celui par défaut }); var contentMarker = [ '<div id="containerTabs">', '<div id="tabs">', '<ul>', '<li><a href="#tab-1"><span>Lorem</span></a></li>', '<li><a href="#tab-2"><span>Ipsum</span></a></li>', '<li><a href="#tab-3"><span>Dolor</span></a></li>', '</ul>', '<div id="tab-1">', '<h3>Lille</h3><p>Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, <a href="http://www.google.fr">google</a> sit amet mauris. In sit amet nisi mauris. Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>', '</div>', '<div id="tab-2">', '<h3>Aliquam vestibulum</h3><p>Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>', '</div>', '<div id="tab-3">', '<h3>Pretium suscipit</h3><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Amectus</li></ul>', '</div>', '</div>', '</div>' ].join(''); var infoWindow = new google.maps.InfoWindow({ content : contentMarker, position : latLng }); google.maps.event.addListener(marker, 'click', function() { infoWindow.open(map,marker); }); google.maps.event.addListener(infoWindow, 'domready', function(){ // infoWindow est biensûr notre info-bulle jQuery("#tabs").tabs(); }); direction = new google.maps.DirectionsRenderer({ map : map, panel : panel // Dom element pour afficher les instructions d'itinéraire }); origin = document.getElementById('origin').value; // Le point départ destination = document.getElementById('destination').value; // Le point d'arrivé if(origin && destination){ var request = { origin : origin, destination : destination, travelMode : google.maps.DirectionsTravelMode.DRIVING // Mode de conduite } var directionsService = new google.maps.DirectionsService(); // Service de calcul d'itinéraire directionsService.route(request, function(response, status){ // Envoie de la requête pour calculer le parcours if(status == google.maps.DirectionsStatus.OK){ direction.setDirections(response); // Trace l'itinéraire sur la carte et les différentes étapes du parcours } }); } }; initialize(); </script>
Kenor, il y a 8 ans

En gros, tu charges en ajax un code HTML + JS qui doit ensuite être éxecuté ?
C'est à mon avis une mauvaise méthode.

AaFrederic Husson, il y a 8 ans

oui c'est bien ça

AaFrederic Husson, il y a 8 ans

quelqu'un aurais une solution?

Huggy, il y a 8 ans

Ton pb ressemble à un pb de synchronisation de scripts
ton script inline (la fonction initialize) s'exécute avant que l'api google map soit chargé
normalement l'ordre d'exécution des scripts est respecté sauf si c'est un script inline (il est async)
Essaie de sortir le inline en fichier (en fichier ou bien charge l'api google depuis la page principale)

AaFrederic Husson, il y a 8 ans

merci ça marche nickel j'ai simplement fait comme tu m'as dit:

Je charge l'api sur la page principale et ça fonctionne impec