18043 sujets

Questions générales et questions de débutants

Solution de loading GoogleMaps

Bonjour à tous,

Alors voici mon petit soucis, je travail actuellement sur un site internet précédemment développé par une autre personne. On m'a demandé de changer la page "Où nous trouver ?".

J'ai opté pour un listing de nos lieux dans une table stylisée avec changement de la carte au passage de la souris, ainsi qu'un scroll jusqu'à la div (en display:none) de présentation du lieu au click.

Voici l'exemple pseudo "finalisé": http://www.web-mez.fr/developpement/carte/

La page serait normalement utilisable si mon adoré IE (fuck that !) ne me poserait pas le soucis de rendre la page figée tant que les maps google ne soient toutes chargées. Je n'ai pas ce problème sur FF, Safari ni Opera (Le reste je n'y porte pas trop attention).

Alors ma question est: quelle solution j'ai à ma disposition pour garder ce principe de div à afficher au clic sans avoir tout ces loads de map en chargement de page ? Je souhaiterais qu'elles ne se chargent que lorsqu'on les demande.

PS: Pour ceux qui examine le OuSommesNous.js, je sais qu'il peut être optimisé, je m'en occuperai une fois ce problème résolue. Mes connaissances en jQuery ne sont pas très grandes pour savoir codés proprement directement...

Merci d'avance et si besoin d'avoir de meilleurs explications, suffit de demander !

Apo.
Modifié par Apoooo (04 Oct 2011 - 15:01)
Salut Apooooooo,
effectivement ta page est bien longue à charger, et je pense que la cause en est principalement le poids des images de ton menu. La solution viendra de leur allégement.
Un google-map que j'ai sur mon propre site (sans autre requête que ce google-map) s'avère être 5x plus véloce que ta page ...Donc !
A défaut de pouvoir/vouloir alléger tes images, crée un popup, non ?
@Apoooooo,
à y regarder de plus près (131 erreurs sur ta page), les 16 iframes que j'ai dénombrés et qui se positionnent auprès de Google à l'ouverture de ta page, ben ! ça fait beaucoup et en soi c'est inutile, non ?

Mieux que des iframe : un simple et unique <div id="map_canvas"></div> par carte-geo, configuré dans un seul javascript placé dans <head>_</head fait l'affaire. Il suffit de créer une liste pour chaque "où sommes-nous ?".

Voici ma page (perso) avec un google-map et une liste d'adresses dans un menu :
http://sentrais.fr/geo.htm
Essaie de comprendre le code et le jeu d'une et d'une seule sollicitation à google-map selon l'ouverture de la page et les requêtes d'un visiteur.
Je ne l'avais pas encore passé au W3C, j'attendais de voir un peu ce que je pouvais en faire pour ensuite commencer à peaufiner, bien que j'ai fais une énorme erreur qui ne m'a pas sauté au yeux, l'utilisation de l'id "content" plusieurs fois, que dieu me punisse!
Les 131 erreurs sont à 90% les iframes de GGMaps.

En réalité, les 16 iframes utilisés sont les simples liens mis à disposition en haut a droite lorsque l'on effectue une recherche sur Google Maps lui-même. J'en ai donc fait des copier/coller, pensant que ça arrangerai comme cela. Mais ce n'est surement pas penser pour en mettre 16 au chargement d'une même page...

Pour le chargement de la page trop long, je ne pense pas que ce soit les images car personnellement, elles apparaissent instantanément et pour avoir le fond transparent, je dois rester en PNG (ou GIF mais j'aime sans plus ce format...). C'est à coup sûr les 16 requetes différentes d'un coup qui ne passe pas.

J'ai regardé rapidement ton code et si je ne me trompe pas, tu as utilisé l'API de google non?
L'idée de n'avoir qu'un emplacement pour la carte, je suis preneur mais le soucis c'est que je n'ai pas seulement une carte à faire afficher mais toute une description. Et la ça pose problème car les descriptions, elles, doivent être déjà écrites pour les structurés.. Ce n'est pas un simple renvoi de carte après requete. Ou du moins, c'est ma logique qui comprend cela et je m'excuse si je vois mal.

En tout cas, merci de t'attarder sur mon problème et de fournir des pistes de recherche. Je regarderais plus en profondeur demain au boulo.
Merci zebulin, tu m'as fais décoincer de petit blocage que j'avais dans ma tête qui fesait que je ne trouvais pas de solution logique à une seule et unique carte.

J'ai donc opté pour Google maps API comme tu l'as fais et ai adapté le code javascript/jQuery pour ma page. Cela fonctionne imepccable et je t'en remercie !

J'ai mis à jour la demo d'exemple si jamais ça intéresse des personnes qui recherche à faire cela, le code est a votre disposition Smiley smile

En parlant de code, il est temps de le nettoyer un peu maintenant.

Encore merci pour l'aide et continuer comme ça, la communauté Alsa gère vraiment !
Cher Apooooooo,
une remarque ultime : l'API de google est personnelle, attribuée à un et un seul siteWeb (sécurité nationale US j'imagine) Si toutefois cette API apparaît en clair (non cryptée) dans le code d'une page, elle ne peut être copier-collée pour/sur un autre siteWeb ... sous peine de BigBrothers et ses grandes oreilles, et annulation de l'API.

Pour obtenir gracieusement une API personnelle pour un siteWeb existant, rendez-vous sur le site de Google.
Apooooo,
effectivement les mofifs que tu as apportées à ta page sont excellentes.
Juste un dernier détail : la lucarne de google-map se repositionne haut/bas automatiquement lors d'une requête, ce qui fait perdre le fil du bas de page. Une solution serait de définir par .css cette google-map en position:fixed;top:_px;left:_px
Orfèvre en .css tu devrais y parvenir sans difficulté, fenêtre grande ou petite ...
Oui oui, ne t'inquietes pas, j'ai juste utilisé la clé pour testé, j'ai ensuite fait la démarche pour avoir la mienne. Mais au final, je suis parti sur l'API v3, les boutons de sélection (plan, satellite, etc..) ainsi que la fluidité sont un peu mieux que la v3, encore heureux pour une mise à jour Smiley cligne Et surtout, cet v3 ne demande plus de key !

Qu'entends tu par "perdre le fil du bas de page" ? pas trop compris où se situe le problème.
Modifié par Apoooo (10 Oct 2011 - 15:36)
En effet l'API V3 est à découvrir :
http://code.google.com/intl/fr/apis/maps/documentation/javascript/

Ta map est en {position:relative} comme tous les éléments de la page, n'est-ce pas ?
Or lorsque l'on fait défiler la page jusqu'en bas et que l'on clique un lien afin d'obtenir la map correspondante, la map se recentre automatiquement : ceci entraîne le reste de la page, donc on perd visuellement le lien sur lequel on vient cliquer !

Une solution serait pour la map : {position:fixed;left:_%;top:_px; ...} où les % (non les pixels) devront se coordonner avec la largeur utile de ta page et sa {position:relative;left_%; ...}

Un bel article d'orfèvrerie en somme ...Non ?
Modifié par zebulin (12 Oct 2011 - 13:24)
Ha je vois où tu veux en venir. Excuses moi de pas avoir compris au debut, je n'ai pas ce soucis et je ne l'avais pas encore expérimenté, tout simplement car je suis sur un 24" et donc tous les liens sont visible dès le début, aucun problème de recentrage...

Mais le fait que la page se recentre sur la div description, c'est "voulu", car la personne pourrait cliquer sans savoir que le haut s'est modifié. Mais c'est vrai que ce principe de map en fixed peut être pas mal, cependant, la page actuelle est une page de test et donc mettre des valeurs de top/left est impossible car elle est destiné à être couplée avec un header (logo, menu etc...). La map se retrouverai collée en haut au chargement de la page ce qui cacherait le header...

J'espère ne pas confondre avec quelque chose d'autre, la position fixed n'ayant jamais vraiment été utilisé par mes soins.
Modifié par Apoooo (12 Oct 2011 - 16:43)
Sujet clos
Aller à