IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Tabs et google maps


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juillet 2012
    Messages
    18
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juillet 2012
    Messages : 18
    Par défaut Tabs et google maps
    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/

  2. #2
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2007
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Gers (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2007
    Messages : 282
    Par défaut
    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

  3. #3
    Membre averti
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juillet 2012
    Messages
    18
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juillet 2012
    Messages : 18
    Par défaut
    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!

  4. #4
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2007
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Gers (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2007
    Messages : 282
    Par défaut
    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

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    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>

  6. #6
    Membre Expert Avatar de Lorenzo77
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    1 472
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 472
    Par défaut
    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é

Discussions similaires

  1. [Google Maps] IE6 refuse d'ouvrir ma page
    Par Shyboy dans le forum APIs Google
    Réponses: 5
    Dernier message: 03/10/2006, 08h47
  2. [Google Maps] Intégrer de nouvelles icônes
    Par Shyboy dans le forum APIs Google
    Réponses: 7
    Dernier message: 01/10/2006, 00h30
  3. [SimpleXML] Google Maps, Problème d'encoding dans une boucle
    Par yahn dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 23/09/2006, 19h40
  4. [google maps] probleme avec ie
    Par kowabounga dans le forum Général Python
    Réponses: 1
    Dernier message: 14/09/2006, 15h20
  5. 4D & Google Maps
    Par gbardy dans le forum 4D
    Réponses: 1
    Dernier message: 30/06/2006, 07h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo