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/
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 : Sélectionner tout - Visualiser dans une fenêtre à part
1
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 codehttp://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 html : Sélectionner tout - Visualiser dans une fenêtre à part
1
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title> - jsFiddle demo by paocemalin</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/> <link rel="stylesheet" type="text/css" href="/css/result-light.css"/> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"/> <style type='text/css'> #map { width:300px; height:300px; } </style> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ /*Script tabs-onglets*/ $(document).ready(function () { $("#tabs").tabs({ fx: { opacity: 'toggle' }, show: function (event, ui) { google.maps.event.trigger(map, 'resize'); }, }); }); /*API GOOGLE MAPS*/ $(document).ready(function () { var myLatlng = new google.maps.LatLng(48.113475, -1.675707999999986); var myLatlng = new google.maps.LatLng(48.113475, -1.675707999999986); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var myMap = new google.maps.Map( document.getElementById('map'), myOptions) }); });//]]> </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">Photos</a> </li> <li><a href="#tabs-2">Equipement / Services</a> </li> <li><a href="#tabs-3">Localiser</a> </li> </ul> <div id="tabs-1"></div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <div id="map"></div> </div> </div> </body> </html>
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
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é
Partager