aide sur return

Version imprimable

Voir 40 message(s) de cette discussion en une page

27/03/2011, 23h17
laurentg2003

exactement ce que j'aurais fait :ccool:

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:

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>

01/04/2011, 00h44
NoSmoking

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:

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>

Citation:

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).

donc je me jette
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.

Code:

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>

à bien lire, certaines habitudes sont indispensables à prendre.

05/04/2011, 20h13
alexdevl

Merci NoSmoking !

Cela à l'air sympa,
J'essaie de comprendre... (et j'applique) et je reviens si j'ai des questions

Merci encore.

Alex

Voir 40 message(s) de cette discussion en une page