exactement ce que j'aurais fait![]()
Bonjour,
J'ai avancé et cela va pas mal.
Par contre je voudrais rajouter une listes des marqueurs dans un tableau sur la gauche (c'est à dire avec les noms Le Louvre et La Part Dieu qui ramènent à l'adresse sur la carte).
Pourriez vous m'aider sur la méthode à employer...dois je passer par une div, un tableau..
Merci de votre aide.
Alex
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 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <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() { // *** *** Création de la carte *** *** // *** Centrage sur le centre de la France *** latlng_c=[45.462367,4.389975] //"Stade Geoffroy-Guichard, Saint Etienne" var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]); var myOptions = { zoom: 5, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var nom; var site; var address; var latlng; // *** Ajout des marqueur *** nom="Le louvre" phone="01..." address="Paris" latlng=[48.861101, 2.335324] mark_Address(map,nom,phone,address,latlng) nom="La Part Dieu" phone="04..." address="Lyon" latlng=[45.760892, 4.859519] mark_Address(map,nom,phone,address,latlng) } // fin de la fonction initialize() // ****** Fonction marquage ****** function mark_Address(map,nom,phone,address,latlng_c) { var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]); var myWindowOptions = { content: '<p align="center"><font size="4">'+nom+'<br>'+phone+'<br>'+address+'<br></font></p>' }; var myInfoWindow = new google.maps.InfoWindow(myWindowOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title: nom }); // Affichage de la fenêtre au click sur le marker google.maps.event.addListener(marker, 'click', function() { myInfoWindow.open(map,marker); }); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
tu as le choix des armes, liste UL LI, lien ...
A partir de tes données et grâce à une boucle tu crées tous tes les éléments de la liste.
Pour une mise en oeuvre aisée autant avoir toutes tes données sous forme de tableau ou tableau d'objet, ce qui n'est visiblement pas le cas dans ce que tu nous montres.
A NoSmoking
Comme tu me l'a conseillée voici le code avec une boucle for prenant des éléments dans une liste.
J'ai adapté un code de l'api google map js V2 vers l'api actuelle :
http://econym.org.uk/gmap/basic2.htm
Je suis ouvert aux remarques ceci étant mon premier code javascript...je me suis basé sur ce que je savais en python (liste, liaison action/ événement).
Alex
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 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <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() { // *** *** Création de la carte *** *** // *** Centrage sur le centre de la France *** latlng_c=[45.462367,4.389975] //"Stade Geoffroy-Guichard, France" var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]); var myOptions = { zoom: 5, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var nom; var site; var address; var latlng; side_bar_html = ""; gmarkers = []; // *** Ajout des marqueur *** var tMarker = [ { nom:"Le louvre", phone:"01..", address:"Paris", latlng:[48.861101, 2.335324], }, { nom:"La Part Dieu", phone:"04..", address:"Lyon", latlng:[45.760892, 4.859519], } ] for (m in tMarker){ mark_Address(map,tMarker[m].nom,tMarker[m].phone,tMarker[m].address,tMarker[m].latlng); //alert(tMarker[m].address) } document.getElementById("side_bar").innerHTML = side_bar_html; } // fin de la fonction initialize() // ****** Fonction marquage ****** function mark_Address(map,nom,phone,address,latlng_c) { var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]); var myWindowOptions = { content: '<p align="center"><font size="4">'+nom+'<br>'+phone+'<br>'+address+'<br></font></p>' }; var myInfoWindow = new google.maps.InfoWindow(myWindowOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title: nom }); // Affichage de la fenêtre au click sur le marker google.maps.event.addListener(marker, 'click', function() { myInfoWindow.open(map,marker); }); gmarkers.push(marker); side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + nom + '<\/a><br>'; } // Récupération du click correspondant et ouverture de la fenêtre associée function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } </script> </head> <body onload="initialize()"> <table border=1> <tr> <td width = 250 valign="top" style="text-decoration: underline; color: #4444ff;"> <div id="side_bar"></div> </td> <td> <div id="map_canvas" style="width: 1000px; height: 700px"></div> </td> </tr> </table> </body> </html>
donc je me jetteJe suis ouvert aux remarques ceci étant mon premier code javascript...je me suis basé sur ce que je savais en python (liste, liaison action/ événement).
il s'agit de remarques essentiellement liées à la façon de faire, mais plutôt que de tout détailler j'ai mis des commentaires inline.
à bien lire, certaines habitudes sont indispensables à prendre.
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
130
131
132
133
134
135
136
137
138
139 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height : 100% } #side_bar { text-align : center; } #side_bar button { font-size : 16px; font-family : Verdana, Arial; width : 150px; height : 40px; padding : 5px; margin : 5px; border : 1px solid #c0c0c0; background-color : #f0f0f0; cursor : pointer; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> // Variable globale var gmarkers = []; function initialize() { // *** *** Creation de la carte *** *** // *** Centrage sur le centre de la France *** // METTRE le mot cle var et un point virgule en fin d'instruction var latlng_c=[45.462367,4.389975]; //"Stade Geoffroy-Guichard, France" var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]); var myOptions = { zoom: 5, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); // VARIABLE QUI NE SERVENT PAS ou PLUS // OUT var nom; // OUT var site; // OUT var address; // OUT var latlng; // variable deja definie // OUT side_bar_html = ""; // VARIABLE sans var est consideree comme GLOBALE, A METTRE HORS FUNCTION AVEC MOT CLE var // OUT gmarkers = []; // *** Ajout des marqueur *** var tMarker = [ { nom:"Le louvre", phone:"01..", address:"Paris", latlng:[48.861101, 2.335324] // ne pas mettre de virgule apres le dernier IE don't like }, { nom:"La Part Dieu", phone:"04..", address:"Lyon", latlng:[45.760892, 4.859519] // ne pas mettre de virgule apres le dernier IE don't like } // METTRE un point virgule en fin d'instruction ]; // METTRE le mot cle var for( var m in tMarker){ mark_Address(map,tMarker[m].nom,tMarker[m].phone,tMarker[m].address,tMarker[m].latlng); //alert(tMarker[m].address) } // OUT document.getElementById("side_bar").innerHTML = side_bar_html; } // fin de la fonction initialize() // ****** Fonction marquage ****** function mark_Address(map,nom,phone,address,latlng_c) { var oSide = document.getElementById("side_bar"); var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]); var myWindowOptions = { content: '<p align="center"><font size="4">'+nom+'<br>'+phone+'<br>'+address+'<br></font></p>' }; var myInfoWindow = new google.maps.InfoWindow(myWindowOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title: nom }); // Affichage de la fenetre au click sur le marker google.maps.event.addListener(marker, 'click', function() { myInfoWindow.open( map, marker); }); gmarkers.push(marker); // creation du bouton vers marqueur var oBtn = document.createElement('BUTTON'); var oBr = document.createElement( 'BR'); var oTxt = document.createTextNode( nom); // function sur click oBtn.onclick = function(){ google.maps.event.trigger( marker, "click"); }; // titre pour survol oBtn.title = " Afficher \n"+ nom +"\t"; // ajout des elements oBtn.appendChild ( oTxt); oSide.appendChild ( oBtn); oSide.appendChild ( oBr); // OUT side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + nom + '<\/a><br>'; } /*-- PLUS NECESSAIRE // Récupération du click correspondant et ouverture de la fenêtre associée function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } --*/ </script> </head> <body onload="initialize()"> <table border=1> <tr> <td width = 250 valign="top" s_tyle="text-decoration: underline; color: #4444ff;"> <div id="side_bar"></div> </td> <td> <div id="map_canvas" style="width: 1000px; height: 700px"></div> </td> </tr> </table> </body> </html>
Merci NoSmoking !
Cela à l'air sympa,
J'essaie de comprendre... (et j'applique) et je reviens si j'ai des questions
Merci encore.
Alex
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager