Bonjour tout le monde,
J'ai un souci avec l'affichage de ma Google Maps dans un onglet tabs de jQuery. Pouvez-vous m'aider, s'il vous plait ?
Voici mon jsFiddle : http://jsfiddle.net/paocemalin/d3UrB/2/
Version imprimable
Bonjour tout le monde,
J'ai un souci avec l'affichage de ma Google Maps dans un onglet tabs de jQuery. Pouvez-vous m'aider, s'il vous plait ?
Voici mon jsFiddle : http://jsfiddle.net/paocemalin/d3UrB/2/
As tu regardé comment fonctionne google map. Tu dois faire appels à leurs api via javascript.
docs: https://developers.google.com/maps/?hl=fr ou https://developers.google.com/maps/d...on/javascript/
Voici un exemple extrait du second lien:
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { margin: 0; padding: 0; height: 100%; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
Voila, je te conseille vivement de lire le second lien, avec beaucoup d'exemple, d'explication.
Bonne continuation.
lemirandais
Merci de ta réponse mais la map, j'arrive à la faire fonctionner mais pas dans un tabs jquery, il est là mon problème, c'est vrai que mon jsfiddle est pas super, je suis encore dessus et en dehors des tabs, ça fonctionne!
Il y a plein d'exemple sur le net mais rien ne fonctionne, je voudrais savoir si quelqu'un pourrais m'aider à ce sujet car là ça devient très problématique!
Je pense que l'on a les mêmes problèmes. (cf: http://www.developpez.net/forums/d13...-correctement/)
Pour vérifier, mets le 3ème <LI> en première position et normalement, tu verras ta carte. Si elle s'affiche, c'est un soucis de css.
Autre hypothèse, essaie d'enlevez le fichier js jquery ui tabs et normalement, ta carte s'affiche.
lemirandais
Bonsoir,
si l'on regarde la source de ton code :fleche: http://jsfiddle.net/paocemalin/d3UrB/2/show/ on ne trouve pas la moindre trace d'une quelconque insertion de l'API googleMap.
Par contre si on la rajoutes, tout est opérationnel
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
l'API est ajouté dans External Ressources, mais comme il a enlevé la clé unique ca ne peut pas fonctionner.
par contre l'API en question charge d'autres fichiers ... et la je sais pas si jsfiddle est capable de gérer ca
-----
ca fonctionne sans la clé
Les plateformes comme jsfinder sont très bien pour tester en live des codes sources, mais je trouve cela un peu limité, personnellement, j'ai gardé un vieux compte gratuit chez free (oui, cela peut être con) mais au moins on peut mettre des bouts de code et mettre des adresses directes pour tester et permettre à d'autre à tester.
Si tu as un compte free ou même un dossier sur ton serveur web (ouvert à tous) met ton code source, en enlevant mot de passe.... et donne nous une adresse directe. Cela permettra d'avoir un réel aperçu de ton code et voir ce qui se passe.
Bonne journée et code bien.
lemirandais