IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Voir le flux RSS

informer

Gestion d'affichage de Google Maps dans un JQuery tabs

Noter ce billet
par , 11/02/2016 à 17h53 (1262 Affichages)
Bonjour à tous,

Alors que je désespérai de trouver une solution compréhensible au conflit Google Maps / JQuery, la lumière m’a été apportée par la lecture du post de Freedolphin: cliquer ici

Dans ce post, il explique que… la fonction d’appel à l’initialisation de Google Maps est "masquée" par l'activation/désactivation des onglets et qu’il faut donc relancer la fonction d'initialisation de GMaps sous l'événement changement d'onglets, en ajoutant cette ligne de code:
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
if (activeTab=='#onglet'){initialize();};

Fort de cette information stratégique pour comprendre le pourquoi de tant de haine entre Google Maps & JQuery , j’ai fait une page de test en adaptant le code et ça fonctionne.

L'important est donc d'appeler l'initialisation GMaps à chaque fois que l'onglet dans lequel est inséré GMaps est activée. C'est le bout de code suivant:

Code javascript : 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
$(document).ready(function()
{   var jQueryTabs1Options =
   {  show: false,
      event: 'click',
      collapsible: false
   };
   $("#jQueryTabs1").tabs(jQueryTabs1Options);
   $("#jQueryTabs1").on('tabsactivate', function(event, ui)
   {      var index = $("#jQueryTabs1").tabs('option', 'active');
           switch(index)
           {
              case 1: // Ne pas oublier que l'indexation des onglets commence à 0
                   GoogleMapInit();
               break;
            }
      });
});

Il faudra également modifier l'url dans la ligne 24

Code : Sélectionner tout - Visualiser dans une fenêtre à part
<link href="cupertino/jquery-ui.min.css" rel="stylesheet">
et les lignes 113 à 120
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.ui.core.min.js"></script>
<script src="jquery.ui.widget.min.js"></script>
<script src="jquery.ui.mouse.min.js"></script>
<script src="jquery.ui.sortable.min.js"></script>
<script src="jquery.ui.tabs.min.js"></script>

Par contre sur les Css, mes compétences, à l'heure où j'écris ce post, ne sont que théoriques voire rhétoriques et très succinctes.

Le travail n'ayant de sens que partagé, voici le code complet pour un copier/coller sauvage
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="keywords" content="JQuery
AJax
JavaScript
MySQL">
<meta name="author" content="Paul Przekowiak">
<style>
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
</style>
<link href="cupertino/jquery-ui.min.css" rel="stylesheet">
<style>
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
#wb_Form1
{
   background-color: #87CEEB;
   background-image: none;
   border: 1px #CCCCCC solid;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
}
.ui-widget
{
   font-size: 1em !important;
}
#jQueryTabs1
{
   padding: 4px 4px 4px 4px;
}
#jQueryTabs1 .ui-tabs-nav
{
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   padding: 4px 4px 0px 4px;
}
#jQueryTabs1 .ui-tabs-nav li
{
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   margin: 0px 2px -1px 0px;
}
#jQueryTabs1 .ui-tabs-nav li a
{
   padding: 8px 10px 8px 10px;
}
#jQueryTabs1, #jQueryTabs1 .ui-corner-all, #jQueryTabs1 .ui-corner-top
{
   -webkit-border-top-left-radius: 6px;
   -moz-border-top-left-radius: 6px;
   border-top-left-radius: 6px;
   -webkit-border-top-right-radius: 6px;
   -moz-border-top-right-radius: 6px;
   border-top-right-radius: 6px;
}
#jQueryTabs1, #jQueryTabs1 .ui-corner-all, #jQueryTabs1 .ui-corner-bottom
{
   -webkit-border-bottom-right-radius: 6px;
   -moz-border-bottom-right-radius: 6px;
   border-bottom-right-radius: 6px;
   -webkit-border-bottom-left-radius: 6px;
   -moz-border-bottom-left-radius: 6px;
   border-bottom-left-radius: 6px;
}
#jQueryTabs1 .ui-helper-reset
{
   line-height: 16px;
}
#wb_Text1 
{
   background-color: #0000FF;
   background-image: none;
   border: 0px #000000 solid;
   padding: 0;
   margin: 0;
   text-align: center;
}
#wb_Text1 div
{
   text-align: center;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.ui.core.min.js"></script>
<script src="jquery.ui.widget.min.js"></script>
<script src="jquery.ui.mouse.min.js"></script>
<script src="jquery.ui.sortable.min.js"></script>
<script src="jquery.ui.tabs.min.js"></script>
<script>
$(document).ready(function()
{
   var jQueryTabs1Options =
   {
      show: false,
      event: 'click',
      collapsible: false
   };
   $("#jQueryTabs1").tabs(jQueryTabs1Options);
   $("#jQueryTabs1").on('tabsactivate', function(event, ui)
   {
      var index = $("#jQueryTabs1").tabs('option', 'active');
      switch(index)
      {
         case 1:
            GoogleMapInit();
            break;
      }
   });
});
</script>
</head>
<body>
<div id="wb_Form1" style="position:absolute;left:49px;top:44px;width:919px;height:676px;z-index:6;">
<form name="Form1" method="post" action="mailto:yourname@yourdomain.com" enctype="text/plain" id="Form1">
<div id="jQueryTabs1" style="position:absolute;left:33px;top:64px;width:842px;height:563px;z-index:2;">
<ul>
<li><a href="#jquerytabs1-page-0"><span>Item 1</span></a></li>
<li><a href="#jquerytabs1-page-1"><span>Item 2</span></a></li>
</ul>
<div style="height:523px;overflow:auto;padding:0;" id="jquerytabs1-page-0">
<div id="wb_Text1" style="position:absolute;left:225px;top:188px;width:403px;height:196px;text-align:center;z-index:0;">
<span style="background-color:#0000FF;color:#FFFF00;font-family:Arial;font-size:43px;">Cliquer sur le deuxième onglet pour la démonstration</span></div>
</div>
<div style="height:523px;overflow:auto;padding:0;" id="jquerytabs1-page-1">
<div id="wb_JavaScript1" style="position:absolute;left:56px;top:77px;width:740px;height:419px;z-index:1;">
<div id="GoogleMaps" style="width:100%;height:100%;"></div>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script>
var map;
var marker;
var geocoder;
function GoogleMapInit(id, latitude, longitude, address) 
{   var id = "GoogleMaps";
    var latitude = 40.7127837;
    var longitude = -74.00594130000002;
    var address = "New+York,NY";
    
   var latlng = new google.maps.LatLng(latitude, longitude);
   var latlngMarker = new google.maps.LatLng(latitude, longitude);
   var mapOptions = 
   {        
      center: latlng,        
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,        
      streetViewControl: false,        
      zoom: 9,
      zoomControl: true,        
      zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }
   }
   element = document.getElementById(id);
   map = new google.maps.Map(element, mapOptions);   
   marker = new google.maps.Marker({ draggable:true, map: map, position: latlngMarker});   
   geocoder = new google.maps.Geocoder();
   geocoder.geocode({'address': address}, function(results, status) 
   {
      if (status == google.maps.GeocoderStatus.OK) 
      {
         map.setCenter(results[0].geometry.location);
         var marker = new google.maps.Marker(
         {
            map: map, 
            position: results[0].geometry.location
         });
      } 
      else 
      {
        //    alert("Geocode was not successful: " + status);
      }
   });
}
GoogleMapInit();
</script>
 
</div>
</div>
</div>
</form>
</div>
</body>
</html>

Et n'oubliez pas ... Bonjour chez vous

Envoyer le billet « Gestion d'affichage de Google Maps dans un JQuery tabs » dans le blog Viadeo Envoyer le billet « Gestion d'affichage de Google Maps dans un JQuery tabs » dans le blog Twitter Envoyer le billet « Gestion d'affichage de Google Maps dans un JQuery tabs » dans le blog Google Envoyer le billet « Gestion d'affichage de Google Maps dans un JQuery tabs » dans le blog Facebook Envoyer le billet « Gestion d'affichage de Google Maps dans un JQuery tabs » dans le blog Digg Envoyer le billet « Gestion d'affichage de Google Maps dans un JQuery tabs » dans le blog Delicious Envoyer le billet « Gestion d'affichage de Google Maps dans un JQuery tabs » dans le blog MySpace Envoyer le billet « Gestion d'affichage de Google Maps dans un JQuery tabs » dans le blog Yahoo

Mis à jour 19/08/2018 à 13h30 par LittleWhite (Coloration du code)

Catégories
HTML / CSS , Javascript , Développement Web

Commentaires

  1. Avatar de danielhagnoul
    • |
    • permalink
    En actualisant - jQuery, jQuery UI et JS d'aujourd'hui - et en élaguant l'inutile - CSS ! - on obtient :

    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
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1.0">
      <meta name="author" content="Daniel Hagnoul">
      <title>Test</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css">
      <style>
        #jTabs {
          width: 842px;
          height: 563px;
        }
        #jTabs-page-0 {
          height: 523px;
          overflow: hidden;
          padding: 6px;
        }
        #jTabs-page-1 {
          height: 523px;
          overflow: hidden;
          padding: 6px;
        }
        #GoogleMaps {
          width: inherit;
          height: 500px;
        }
      </style>
      <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
      <script src="https://maps.google.com/maps/api/js"></script>
    </head>
    <body>
     
      <form>
        <div id="jTabs">
          <ul>
            <li>
              <a href="#jTabs-page-0">Item 1</a>
            </li>
            <li>
              <a href="#jTabs-page-1">Item 2</a>
            </li>
          </ul>
          <div id="jTabs-page-0">
            <div>
              <p>Cliquer sur le deuxième onglet pour la démonstration</p>
            </div>
          </div>
          <div id="jTabs-page-1">
            <div id="GoogleMaps"></div>
          </div>
        </div>
      </form>
     
      <script>
        "use strict";
        
        $( function(){
          
          {
            let
              GoogleMapInit = function(
                id = "GoogleMaps",
                latitude = 40.7127837,
                longitude = -74.00594130000002,
                address = "New+York,NY"
              ){
                let
                  latlng = new google.maps.LatLng( latitude, longitude ),
                  latlngMarker = new google.maps.LatLng( latitude, longitude ),
                  mapOptions = {        
                    'center' : latlng,        
                    'mapTypeId' : google.maps.MapTypeId.ROADMAP,
                    'mapTypeControl' : false,        
                    'streetViewControl' : false,        
                    'zoom' : 9,
                    'zoomControl' : true,        
                    'zoomControlOptions' : { 'style' : google.maps.ZoomControlStyle.SMALL }
                  },
                  element = document.getElementById( id ),
                  map = new google.maps.Map( element, mapOptions ),
                  marker = new google.maps.Marker( {
                    'draggable' : true,
                    'map' : map,
                    'position' : latlngMarker
                  } ),
                  geocoder = new google.maps.Geocoder();
                
                geocoder.geocode(
                  {
                    'address': address
                  },
                  function( results, status ){
                    if ( status == google.maps.GeocoderStatus.OK ){
                      map.setCenter( results[0].geometry.location );
                      
                      let marker = new google.maps.Marker( {
                        'map' : map, 
                        'position' : results[0].geometry.location
                      } );
                    } else {
                      console.log( "Geocode was not successful: " + status );
                    }
                  }
                );
              };
            
            $( '#jTabs' ).tabs( {
              'show' : false,
              'event' : 'click',
              'collapsible' : false,
              'activate' : function( event, ui ){
                switch( $( this ).tabs( 'option', 'active' ) ){
                  case 1:
                    GoogleMapInit();
                    break;
                }
              }
            } );
          }
          
        });
        
      </script>
    </body>
    </html>
  2. Avatar de informer
    • |
    • permalink
    Merci pour ta contribution à ce post

    Be seeing you! Bonjour chez vous!