Affichage KML à partir de checkbox

**firebird13** · 23/09/2012, 11h38

Bonjour,

Je mets en place une carte google maps dont voici le code :

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
<!DOCTYPE html>
<html>
<head>
<title>********</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css">
html { height: 100%;
} body {
height: 100%; margin: 0px; padding: 0px;
} #map_canvas {
height: 100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script> <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.281071, 8.393555); 
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN, 
navigationControl: true, mapTypeControl: true, 
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM.LEFT,
style: google.maps.ScaleControlStyle.DEFAULT }
};
 
var map = new google.maps.Map(
document.getElementById("map"), myOptions);
 
var kmllayer1 = new google.maps.KmlLayer('mon_fichier.kml', {preserveViewport:true});
	kmllayer1.setMap(map);
	google.maps.event.addListener(kmllayer1, 'click', function(){
    map.setZoom(14);});
 
 
var kmllayer2 = new google.maps.KmlLayer('mon_fichier.kml', {preserveViewport:true});
	kmllayer2.setMap(map);
	google.maps.event.addListener(kmllayer2, 'click', function(){
    map.setZoom(14);
});
}
 
 
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1)
{
mapdiv.style.width = '100%'; myOptions = {
navigationControlOptions : {
style : google.maps.NavigationControlStyle.ANDROID
},
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU }
};
map.setOptions(myOptions); } else {
mapdiv.style.width = '100%'; }
}
</script>
</head>
 
<body onload="initialize()">
<div id="map" style="width: 622px; height: 500px;"></div> 
</body>
</html>

Je souhaiterais afficher des cases à cocher pour appeler chaque couche kml (il y en aura une dizaine) ou séparemment ou toutes à la fois.
J'ai essayé plusieurs solutions sans y parvenir.
Merci de votre aide.

**georgie2** · 24/09/2012, 09h58

Salut !
Connais-tu les feuilles .js (javasript) ?

Les checkboxs vont appeler des fonctions (function), si tu en as beaucoup, mieux vaut placer tes fonctions dans une feuille .js (c'est d'ailleurs peut-être même obligatoire, je ne sais pas).

Tes checkbox seront bien dans ta feuille html, classiquement.

Dans ta page html, la chekbox ressemblera à cela :

Code html :

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

1
2
<p><label><input type="checkbox" id="Revenus_Moyens.kml" onclick="toggleFile(this.id)" />
Niveaux de vie</label></p>

C'est donc bien l'utilisation de la fonction togglefile. Note que ce premier script contient déjà le nom d'un kml. En effet quand tu auras spécifié où sont tes kml, plus besoin de rappeler tout le chemin.

Ah oui : la manipulation d'un kml en vue d'une webmap exige que celui-ci soit hébergé sur le net, et dispose donc d'une adresse url.

Maintenant il faut encore écrire la fonction togglefile, liée aux chekboxs, dans ta feuille .js :

Code :

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

1
2
3
4
5
6
7
8
9
10
function toggleFile(file) {
var objCheckbox = document.getElementById(file);
if (objCheckbox.checked) {
readKml(file);
}
else {
ge.getFeatures().removeChild(currentKml[file]);
currentKml[file] = null;
}
}

Et enfin, la fonction qui va chercher les kml, toujours dans la feuille .js :

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
function readKml(file) {
var kmlFolder = "Ici/LeCheminURL/DuDossier/Contenant/LeKml/"; // To set
var kmlUrl = kmlFolder + file;
google.earth.fetchKml(ge, kmlUrl, function(kml) {
if (!kml) {
alert("Erreur : Lecture du fichier KML impossible !");
return;
}
ge.getFeatures().appendChild(kml);
currentKml[file] = kml;
if (kml.getAbstractView()) {
ge.getView().setAbstractView(kml.getAbstractView());
}
});
}

Plus un petit script dont je n'ai jamais compris l'utilité (si quelqu'un sait ?), qui déclare les kml (mais avec ou sans ça marche), toujours dans .js :

Code :

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

1
2
3
var currentKml = {
"Revenus_Moyens.kml": null, // To set
}

**firebird13** · 24/09/2012, 14h34

Bonjour georgie2,

Merci de ton aide.
j'ai fait un test avec 2 couches kml et ça ne fonctionne pas. Les couches kml s'affichent cases cochées ou non.

J'ai crée le fichier "appelkml.js" suivant :

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
function toggleFile(file) {
var objCheckbox = document.getElementById(file);
if (objCheckbox.checked) {
readKml(file);
}
else {
ge.getFeatures().removeChild(currentKml[file]);
currentKml[file] = null;
}
}
 
function readKml(file) {
var kmlFolder = "chemin_de_mon_dossier_ou_se_trouvent_les_fichiers_kml"; // To set
var kmlUrl = kmlFolder + file;
google.earth.fetchKml(ge, kmlUrl, function(kml) {
if (!kml) {
alert("Erreur : Lecture du fichier KML impossible !");
return;
}
ge.getFeatures().appendChild(kml);
currentKml[file] = kml;
if (kml.getAbstractView()) {
ge.getView().setAbstractView(kml.getAbstractView());
}
});
}
var currentKml = {
"mon_ficheir_kml1": null, // To set
}
var currentKml = {
"mon_ficheir_kml2": null, // To set
}

et modifié mon fichier html comme ceci :

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
!DOCTYPE html>
<html>
<head>
<title>*********</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css">
html { height: 100%;
} body {
height: 100%; margin: 0px; padding: 0px;
} #map {
height: 100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script> <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.281071, 8.393555); 
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN, 
navigationControl: true, mapTypeControl: true, 
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM.LEFT,
style: google.maps.ScaleControlStyle.DEFAULT }
};
 
var map = new google.maps.Map(
document.getElementById("map"), myOptions);
 
var kmllayer1 = new google.maps.KmlLayer('chemin_de_mon_fichier_kml1', {preserveViewport:true});
        kmllayer1.setMap(map);
        google.maps.event.addListener(kmllayer1, 'click', function(){
    map.setZoom(14);});
        center: latlng
        tag:'chk1'      
 
var kmllayer2 = new google.maps.KmlLayer('chemin_de_mon_fichier_kml2', {preserveViewport:true});
        kmllayer2.setMap(map);
        google.maps.event.addListener(kmllayer2, 'click', function(){
    map.setZoom(14);
        center: latlng
        tag:'chk2'
});
}
 
 
 
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1)
{
mapdiv.style.width = '100%'; myOptions = {
navigationControlOptions : {
style : google.maps.NavigationControlStyle.ANDROID
},
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU }
};
map.setOptions(myOptions); } else {
mapdiv.style.width = '100%'; }
}
 
        
</script>
</head>
 
<body onload="initialize()">
<div id="map" style="width: 622px; height: 500px;"></div>
<div><p><label><input type="checkbox" id="mon_ficher.kml1" onclick="toggleFile(this.id)" />
kml1</label></p>
<p><label><input type="checkbox" id="mon_ficher.kml2" onclick="toggleFile(this.id)" />
kml2</label></p></div>
 
<!-- Include Javascript -->
<script type="text/javascript" src="chemin_de_mon_fichier.js"></script> 
</body>
</html>

**georgie2** · 25/09/2012, 00h06

Je pense que les kml se lancent à cause de la fonction var kml layer 1 et 2.
Supprime ces fonctions et réessaie.

Mais tu dois aussi modifier le nom de ton dossier ou se trouvent tes kml. Je rappelle qu'ils doivent être hébergés, le nom du dossier les contenant commencera donc forcément par "http://" et devra se finir par un "/", du type :
http://www.xxx.fr/zzz/aaa/

**firebird13** · 25/09/2012, 00h25

Bonsoir georgie2,

j'ai pensé aussi qu'il y avait une incompatibilité entre les fonctions var klmlayer 1 et 2 et la fonction toggleFile.

J'ai supprimé les 2 fonctions var kmllayer 1 et 2.
J'ai rajouté "/" à la fin du chemin du dossier en ligne contenant les fichiers kml.
(ils sont bien hebergés en ligne).

Là les "layers" ne s'affichent plus, je n'ai plus rien..

**georgie2** · 25/09/2012, 08h24

Ok et il commence bien par "http://" ?

Peux-tu m'en dire plus sur l'API que tu utilises (GoogleMaps ?) ?

J'ai l'habitude d'utiliser ces codes avec l'API GoogleEarth, mais je ne savais même pas qu'on pouvait utiliser GoogleMaps en tant qu'API.

Par contre je sais que la lecture des kml n'est pas optimisée sur GoogleMaps (disparition de certaines symbologies, les balloons qui apparaissent parfois bizarrement...), alors qu'elle l'est sur GoogleEarth et son API.

Autre chose, ça n'explique pas les problèmes que tu as, mais pour plus de performances, il serait bon que toutes tes fonctions et déclarations soient dans ta feuille JS, et non dans le html.

**firebird13** · 25/09/2012, 16h45

- oui bien sur http://......./
- j'utilise l'API google maps V3

Finalement j'ai réussi à contourner le problème en utilisant le plugin
jQuery Gmap3 avec addKmlLayer et cette fonction associée :

Code :

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

1
2
3
4
5
6
7
8
 $('.tools input[type=checkbox]').change(function(){
                    var map = $('#maCarte').gmap3('get'),
                    kml = $('#maCarte').gmap3({
                        action:'get',
                        name:'kmllayer',
                        tag: $(this).attr('id')
                    });
                    kml.setMap( $(this).is(':checked') ? map : null );

**georgie2** · 26/09/2012, 10h51

Ok.
Et ça donne quoi précisément ? Une chekbox classique ?

**firebird13** · 27/09/2012, 12h21

Je t'envoie le lien en MP tu pourras te rendre compte.

**georgie2** · 27/09/2012, 12h42

Ok, bah ça fonctionne bien parfait !

Comment-as-tu fait pour que les checkbox soient cochés par défaut ?

**NoSmoking** · 27/09/2012, 23h55

Bonsoir,
dans ce bout de code

Code javascript :

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

1
2
3
4
5
6
7
8
9
$('.tools input[type=checkbox]').change(function () {
  var map = $('#maCarte').gmap3('get'),
    kml = $('#maCarte').gmap3({
    action: 'get',
    name: 'kmllayer',
    tag: $(this).attr('id')
  });
  kml.setMap($(this).is(':checked') ? map : null);
});

ce qui est dommage c'est de recréer un objet gmap3 que l'affichage soit effectif ou non.

Une façon, en traditionnel, de faire et de tenir un tableau de KML, il ne seront donc chargé qu'une fois.
On pourrait faire par exemple

Code javascript :

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

1
2
3
4
5
6
7
var tKML = [];
function showKml( obj){
  if( !tKML[ obj.id]){
    tKML[obj.id] = new google.maps.KmlLayer( obj.value, {preserveViewport:true});
  }
  tKML[obj.id].setMap( obj.checked ? map :null);
}

avec comme HTML associé

Code html :

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

1
2
3
4
5
6
  <br><input type="checkbox" id="dep_27" value="departements/27.kml" onclick="showKml(this)">
  <label for="dep_27">Eure</label>
  <br><input type="checkbox" id="dep_33" value="departements/33.kml" onclick="showKml(this)">
  <label for="dep_33">Gironde</label>
  <br><input type="checkbox" id="dep_38" value="departements/38.kml" onclick="showKml(this)">
  <label for="dep_38">Isére</label>

- on utilise la value pour stocker l'info sur le KML
- on utilise l'id pour l'identification du KML

Envoyé par firebird13

Je t'envoie le lien en MP tu pourras te rendre compte.

pas bien dans l'esprit d'un forum de partage

**firebird13** · 29/09/2012, 13h46

Bonjour georgie2,
Bonjour nosmoking,

ce qui est dommage c'est de recréer un objet gmap3 que l'affichage soit effectif ou non.

Une façon, en traditionnel, de faire et de tenir un tableau de KML, il ne seront donc chargé qu'une fois.
On pourrait faire par exemple

J'ai ne suis pas parvenu à faire fonctionner avec cette methode qui m'interesse.
Peut-être no smoking pourrait m'en dire un peu plus sur la méthode pour mettre en place un "tableau" pour les "kml" .

Voici le lien ou j'ai essayé la methode : http://forumdubateau.com/guide/guide2.html

Et le lien de la première methode décrite, qui fonctionne :
http://forumdubateau.com/guide/guide.html

Citation:
Envoyé par firebird13
Je t'envoie le lien en MP tu pourras te rendre compte.
pas bien dans l'esprit d'un forum de partage

(désolé d'avoir communiqué le lien par MP à georgie2, mais à ce moment-là c'était encore en construction.)

Une chose que je ne suis pas parvenu à faire également, c'est d'avoir un bouton qui permet, soit de tous cocher soit de tout décocher.....

**NoSmoking** · 30/09/2012, 23h40

J'ai regardé ton soucis et voilà ce que l'on pourrait faire

Concernant le HTML, ce n'est pas top lié à l'usage de TABLE pour la mise en page, mais là n'est pas le propos.

Concernant le javascript, l'approche via un objet contenant les données à traiter pourrait être celui ci

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
18
19
20
21
22
23
24
25
26
27
28
29
30
var oData = [
  {
    'url': 'http://forumdubateau.com/guide/kml/mouillag.kml',
    'tag': 'chk1'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/ports.kml',
    'tag': 'chk2'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/carburants.kml',
    'tag': 'chk3'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/chantier.kml',
    'tag': 'chk4'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/restaurant.kml',
    'tag': 'chk5'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/commerce.kml',
    'tag': 'chk6'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/pointsremarquable.kml',
    'tag': 'chk7'
  }
];

j'ai repris les données que tu utilises

Au chargement de la page on récupères les données KML et on les stock dans une variable qui est un tableau d'objet dans lequel on mettra les informations utiles pour la suite, on ne profite pour affecter aux checkbox la fonction d'affichage sur le onclick et pour afficher les POIs.

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
// 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 = true;
    // init de tKML
    showKml( oCheck);
  }
}

la fonction d'affichage devenant

Code javascript :

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

1
2
3
4
5
6
7
8
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 ? oMap :null);
}

très peu diférente de celle que je t'avais mise mais qui tiens compte de la demande de tout pouvoir afficher/masquer.

Justement cette fonction ne sera rien d'autre que

Code javascript :

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

1
2
3
4
5
6
function showHideAll( flag){
  for( i in tKML){
    tKML[i].check.checked = flag;
    showKml( tKML[i].check);    
  }
}

Comme il faut utiliser cette fonction, on ajoute 2 boutons, btn_hide et btn_show auxquels on affecte cette fonction

Code javascript :

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

1
2
3
4
5
6
7
8
var oBtn = document.getElementById('btn_hide');
oBtn.onclick = function(){
  showHideAll( false);
};
oBtn = document.getElementById('btn_show');
oBtn.onclick = function(){
  showHideAll( true);
};

voilà tout ce dont tu as besoin sans oublier a création de la map.

Le fichier javascript devint donc

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
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
var oData = [
  {
    'url': 'http://forumdubateau.com/guide/kml/mouillag.kml',
    'tag': 'chk1'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/ports.kml',
    'tag': 'chk2'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/carburants.kml',
    'tag': 'chk3'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/chantier.kml',
    'tag': 'chk4'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/restaurant.kml',
    'tag': 'chk5'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/commerce.kml',
    'tag': 'chk6'
  },
  {
    'url': 'http://forumdubateau.com/guide/kml/pointsremarquable.kml',
    'tag': 'chk7'
  }
];
// création de la carte
var oMap = new google.maps.Map(document.getElementById( 'div_map'),{
    'zoom' : 6,
    'center' : new google.maps.LatLng(42.80184957552014, 8.701172187499985),
    'backgroundColor' : '#fff',
    'streetViewControl' : false,
    'zoomControlOptions' : {
      'style' : google.maps.ZoomControlStyle.SMALL
    },
    'mapTypeId': google.maps.MapTypeId.TERRAIN,
  });
// 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 = true;
    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 ? oMap :null);
}
var oBtn = document.getElementById('btn_hide');
oBtn.onclick = function(){
  showHideAll( false);
};
oBtn = document.getElementById('btn_show');
oBtn.onclick = function(){
  showHideAll( true);
};

Bon j'ai repris également le reste pour le fun et cela donne

Le fichier CSS

Code css :

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
html {
  height:100%
}
body {
  height:100%;
  margin:0px;
  padding:0px;
  font-family:Verdana,Geneva,sans-serif;
  font-size:12px;
}
.legende {
  color:#396;
  font-size:12px;
  background-color:#F6F6F6;
  border:1px solid #FFF;
}
span.newtitre {
  color:#396;
  font-size:24px;
  font-family:Verdana,Geneva,sans-serif;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  background-color:#F6F6F6;
  border:1px solid #396;
  margin-bottom:20px;
  line-height:32px;
}
a {
  font-family:Verdana,Geneva,sans-serif;
  color:#396;
}
a:link {
  text-decoration:none;
}
a:visited {
  text-decoration:none;
}
a:hover {
  text-decoration:none;
  color:#333;
}
a:active {
  text-decoration:none;
  text-align:center;
}
#header {
  width:844px;
  margin:0 auto 5px;
}
#bandeau {
  width:844px;
  margin:0 auto;
}
.gauche {
  width:620px;
  float:left;
  text-align:center;
}
.droite {
  width:214px;
  float:right;
  text-align:center;
}
#div_conteneur {
  width:834px;
  margin:0 auto;
  padding:5px;
  border:1px solid #e0e0e0;
  overflow:hidden;
}
#div_map {
  height:550px;
  width:620px;
  float:left;
}
#div_check {
  width:214px;
  float:right;
}
#div_check p {
  background-color:#F6F6F6;
  margin:0 0 2px 2px;
  border:1px solid #FFFFFF;
  color:#339966;
  font-family:Verdana,Geneva,sans-serif;
  font-size:12px;
  line-height:40px;
}
#div_check img {
  float:right;
  height:37px;
  width:32px;
}
.footer {
  font-family:Verdana,Geneva,sans-serif;
  font-size:9px;
  color: #396;
}

et le fichier HTML, sûrement améliorable

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Le GUIDE du Forum du Bateau</title>
<link rel="stylesheet" type="text/css" href="nom_fichier.css">
</head>
<body>
<div id="header" class="legende">
  <img src="images/bandeauFdB.png" width="844" height="146"><br>
  <a href="http://forumdubateau.com/portal.php">Retour Forum</a>
</div>
<div id="bandeau" class="titre">
   <span class="newtitre gauche">Le GUIDE du FORUM du BATEAU - Tous les POI'S</span>
   <span class="newtitre droite"><a href="http://forumdubateau.com/guide/ajoutPOI/contact.php">Ajouter un POI</a></span>
</div>
<div id="div_conteneur">
  <div id="div_map"></div>
  <div id="div_check">
    <p><input type="checkbox" id="chk1">Mouillages<img src="images/mouillage.png" width="32" height="37"></p>
    <p><input type="checkbox" id="chk2">Ports    <img src="images/port.png" width="32" height="37"></p>
    <p><input type="checkbox" id="chk3">Carburants    <img src="images/carburant.png" width="32" height="37"></p>
    <p><input type="checkbox" id="chk4">Chantiers, Techniciens    <img src="images/chantier.png" width="32" height="37"></p>
    <p><input type="checkbox" id="chk5">Restaurants, Pubs    <img src="images/restaurant.png" width="32" height="37"></p>
    <p><input type="checkbox" id="chk6">Commerces    <img src="images/commerce.png" width="32" height="37"></p>
    <p><input type="checkbox" id="chk7">Points remarquables    <img src="images/pointremarquable.png" width="32" height="37"></p>
    <p><input type="checkbox" id="chk8">Divers    <img src="images/divers.png" width="32" height="37"></p>
    <p style="text-align:center;">
      <input type="button" id="btn_hide" value="Hide All">
      <input type="button" id="btn_show" value="Show All">
    </p>
  </div>
</div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="nom_fichier.js"></script>
</body>
</html>

nota: les scripts sont placés en fin de document, et il faut veuiller à mettre les bons noms aux fichier CSS et JS.

Voilà ce que l'approche...

**firebird13** · 01/10/2012, 16h25

Bonjour NoSmoking,

Merci de ton aide, c'est exactement ce que je recherchais.

c'est en ligne : http://forumdubateau.com/guide/guide.html

Il me reste un point pour lequel je ne trouve pas la solution: J'aimerais qu'au passage de la souris sur un marqueur, s'affiche un petit titre pour l'identifier.
J'ai essayé beaucoup de chose sans succès....

**NoSmoking** · 01/10/2012, 18h58

J'aimerais qu'au passage de la souris sur un marqueur, s'affiche un petit titre pour l'identifier.

il n'apparaît pas de gestion des événements sur les fichiers KML autre que le click

https://developers.google.com/maps/d...hl=fr#KmlLayer

**firebird13** · 01/10/2012, 19h46

C'est bien ce que j'avais cru comprendre, mais je n'en étais pas certain.
Ce n'est pas essentiel pour mon application.
Merci encore de ton aide précieuse sur cette affaire.

Affichage KML à partir de checkbox

APIs Google

Discussions similaires

Partager

Partager