Tabs et google maps

**tonycemalin** · 23/04/2013, 15h25

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/

**lemirandais** · 23/04/2013, 16h51

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

**tonycemalin** · 23/04/2013, 18h27

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!

**lemirandais** · 23/04/2013, 18h51

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

**NoSmoking** · 23/04/2013, 22h13

Bonsoir,
si l'on regarde la source de ton code

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 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>

**Lorenzo77** · 23/04/2013, 22h47

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é

Tabs et google maps

jQuery

Vue hybride

Discussions similaires

Partager

Partager