Discussion :

[stevensavior]

Bonjour, je me suis aidé de ce vieux topic pour faire une map où par l'intermédiaire de checkbox on peut afficher plusieurs kmz.

Le problème est que sur IE (toutes versions ) j'ai une erreur de code sur cette ligne concernant la balise "null".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

tKML[obj.id].kml.setMap( obj.checked ? oMap :null);

Mon code Javascript est le même que celui donné genéreursement par NoSmoking, avec une fonction d'autocomplétion en plus.
Je l'affiche entier pour aider à comprendre l'origine du problème mais j'ai volontairement enlevé les liens vers les kmz qui ne doivent pas êtres rendus publiques.

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
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
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
 
    <script>	
function initialize() {
 
// chargement des couches kmz
	var oData = [
  {
    'url': '',
    'tag': 'chk2'
  },
  {
    'url': '',
    'tag': 'chk1'
  },
  {
    'url': '',
    'tag': 'chk3'
  },
  {
    'url': '',
    'tag': 'chk4'
  },
  {
    'url': '',
    'tag': 'chk5'
  },
  {
    'url': '',
    'tag': 'chk6'
  },
  {
    'url': '',
    'tag': 'chk7'
  },
  {
    'url': '',
    'tag': 'chk8'
  }  
];
// création de la carte
var map = new google.maps.Map(document.getElementById('div_map'),{
    'zoom' : 11,
    'center' : new google.maps.LatLng(43.765144, 7.222824),
    'backgroundColor' : '#000',
    'streetViewControl' : true,
    'zoomControlOptions' : {
      'style' : google.maps.ZoomControlStyle.LARGE
    },
    'mapTypeId': google.maps.MapTypeId.ROAD,
  });
 
// Fonction d'autocompletion  
var input = document.getElementById('city_form_affinage');
var autocomplete = new google.maps.places.Autocomplete(input);
 
		autocomplete.bindTo('bounds', map);
 
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
		map: map,
        draggable:true		
  });
 
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
		if (!place.geometry) {
        // Inform the user that the place was not found and return.
        input.className = 'notfound';
        return;
        }
        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
        } else {
        map.setCenter(place.geometry.location);
        map.setZoom(16);  // Why 17? Because it looks good.
        }
var image = new google.maps.MarkerImage(
        place.icon,
        new google.maps.Size(71, 71),
        new google.maps.Point(0, 0),
        new google.maps.Point(17, 34),
        new google.maps.Size(35, 35));
        marker.setIcon(image);
        marker.setPosition(place.geometry.location);
        });
 
// affectation de la fonction affichage oui/non
var tKML = [], oCheck;
var i, nb = oData.length;
for( i=0; i < nb; i++){
  oCheck = document.getElementById( oData[i].tag);
  if( oCheck){
    oCheck.value = oData[i].url;
    oCheck.onclick = function(){
       showKml(this);
    };
    oCheck.checked = false;
    showKml( oCheck);
  }
}
function showHideAll( flag){
  for( i in tKML){
    tKML[i].check.checked = flag;
    showKml( tKML[i].check);    
  }
}
function showKml( obj){
  if( !tKML[ obj.id]){
    tKML[obj.id] = {};
    tKML[obj.id].kml = new google.maps.KmlLayer( obj.value, {preserveViewport:true});
    tKML[obj.id].check = obj;
  }
  tKML[obj.id].kml.setMap( obj.checked ? map :null);
}
var oBtn = document.getElementById('btn_hide');
oBtn.onclick = function(){
  showHideAll( false);
};
oBtn = document.getElementById('btn_show');
oBtn.onclick = function(){
  showHideAll( true);
};
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>

Ensuite j'ai simplement inséré une balise div dans la partie <body>. Les propriétés de cette div sont gérés par un fichier .css.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="div_map"></div>

Merci de m'aider à résoudre ce problème.

[Spartacusply]

Essaye avec un "if" classique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
if (obj.checked == true) {
      tKML[obj.id].kml.setMap(oMap );
} else {
       tKML[obj.id].kml.setMap(null);
}

Vu que je suis pas convaincu, fait aussi un :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(tKML[obj.id].kml);

pour bien voir ce que contiens ton objet.

[NoSmoking]

Bonjour,

Le problème est que sur IE (toutes versions ) j'ai une erreur de code sur cette ligne concernant la balise "null".

hors du contexte global je doute de la ligne d'erreur, il n'y a pas de onclick dans la ligne que tu montres.

[stevensavior]

Merci de vous intéresser à mon probleme.

Je débute avec javascript, pouvez vous m'aiguiller pour intégrer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if (obj.checked == true) {
      tKML[obj.id].kml.setMap(oMap );
} else {
       tKML[obj.id].kml.setMap(null);

à la fonction showkml:

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
function showKml( obj){
  if( !tKML[ obj.id]){
    tKML[obj.id] = {};
    tKML[obj.id].kml = new google.maps.KmlLayer( obj.value, {preserveViewport:true});
    tKML[obj.id].check = obj;
  }
  tKML[obj.id].kml.setMap( obj.checked ? map :null);
}
var oBtn = document.getElementById('btn_hide');
oBtn.onclick = function(){
  showHideAll( false);
};
oBtn = document.getElementById('btn_show');
oBtn.onclick = function(){
  showHideAll( true);
};

Pour info j'ai intégré les checkboxs dans une interface jquery, où dans une balise <li> je mets:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        <li><a class="icon-neige"><input type="checkbox" id="chk6" />
        Stations ski et Espaces nordiques</a></li>

[Spartacusply]

Remplace :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

tKML[obj.id].kml.setMap( obj.checked ? map :null);

par mon bout de code.

[stevensavior]

J'avais essayé mais mes claques kmz ne s'affiche plus en cochant les checkbox après modification du code comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function showKml( obj){
  if( !tKML[ obj.id]){
    tKML[obj.id] = {};
    tKML[obj.id].kml = new google.maps.KmlLayer( obj.value, {preserveViewport:true});
    tKML[obj.id].check = obj;
  } 
  if (obj.checked == true) {
        tKML[obj.id].kml.setMap(oMap );
  } else {
       tKML[obj.id].kml.setMap(null);
  }
}