informer

Gestion d'affichage de Google Maps dans un JQuery tabs

Noter ce billet

par

, 11/02/2016 à 17h53 (1685 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

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

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

« Surcharge d'une fonction JavaScript Liste des billets Google Maps trucs & astuces : zoom après fitbounds »

Commentaires

danielhagnoul - 12/02/2016 13h15

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>

informer - 12/02/2016 17h23
- |
Merci pour ta contribution à ce post

Be seeing you! Bonjour chez vous!

informer

Gestion d'affichage de Google Maps dans un JQuery tabs

Noter ce billet

Commentaires

+ Créer un blog

Catégories globales

Catégories de l'utilisateur

Archives

<	Avril 2024
Di	Lu	Ma	Me	Je	Ve	Sa
24	25	26	27	28	29	30
31	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	1	2	3	4

<	Avril 2024
Di	Lu	Ma	Me	Je	Ve	Sa
24	25	26	27	28	29	30
31	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	1	2	3	4

<	Avril 2024
Di	Lu	Ma	Me	Je	Ve	Sa
24	25	26	27	28	29	30
31	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	1	2	3	4