markers par ordre chronologique

**Bm3w325i** · 06/11/2008, 00h34

Bonjour,

Je suis en train de faire un gestionnaire de maps pour afficher des itinéraires, lorsque l'on sélectionne une ville dans une liste déroulante un marker s'affiche sur la map.

Mon problème: j'aimerais que selon l'ordre ou j'ajoute les markers ces derniers soit différenciés.
=> ville de depart = markers affichant un "1", puis la ville suivante aurait un marker affichant un 2...

Merci

**SpaceFrog** · 06/11/2008, 09h32

fais un push dasn un array
l'index de l'array te donnera la chrnologie

**Bm3w325i** · 06/11/2008, 10h27

merci, je vais chercher de ce coté la, mais je débute en programmation, je vais sûrement revenir vers vous ^^'.
Si quelqu'un à un exemple de code je suis preneur

**Bm3w325i** · 06/11/2008, 18h20

J'ai très légèrement avancé, j'arrive a afficher une icône personnalisé, mais il m'affiche toujours la dernier de ma liste:

code 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
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
<script type="text/javascript">
    //<![CDATA[
// tableau de coordonnées et d'informations à utiliser */
var points = new Array();
points[0] = new Array();
 
points[0]['icon'] = "./markers/marker1.png";
points[1] = new Array();
 
points[1]['icon'] = "./markers/marker2.png";
points[2] = new Array();
 
points[2]['icon'] = "./markers/marker3.png";
points[3] = new Array();
 
points[3]['icon'] = "./markers/marker4.png";
 
var map = null; 
 
/* définition d'une classe d'icône */
var icon = new GIcon();
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(32, 32);
icon.shadowSize = new GSize(32, 32);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// Transformation d'une adresse en coordonnées
      function showAddress(address)
        {
        if (geocoder)
          {
          geocoder.getLatLng(address, function(point)
            {
            if (!point) {alert(address + " not found");} // Adresse non connue par Google Maps
            else
              {
 
             for (var i = 0; i < points.length; i++) {
 
		//var point = new GLatLng(points[i]);
		var marker = new GMarker(point);
		icon.image = points[i]['icon'];
		map.addOverlay(new GMarker(point, icon));
 
	}
 
 
			  }
            });
          }
        };

Invité · 08/11/2008, 15h28

Bonjour,

Si tu entres une adresse à la fois, il ne faut pas de boucle FOR, ni raffraichir la page lors du SUBMIT

Ex:
HTML

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAArIk5ozMi-vzRrSVPw2MdXBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRXkpZBMkE3ZF8zb1bTOZ8KKwjEOw" type="text/javascript"></script>
    <style type="text/css">
     #map{
      border: 1px solid black;
      width: 600px;
      height: 400px;
     }
    </style>
  </head>
  <body onunload="GUnload()">
 
    <div id="map"></div>
    <form onsubmit="showAddress(this.adresse.value); return false">
      <input name="adresse" type="text" size="90" />
      <input type="submit" value="Go" />
    </form>
    <script src="./js/test.js" type="text/javascript"></script>
 
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>
  </body>
</html>

JavaScript:

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
// JavaScript Document
//<![CDATA[
 
if (GBrowserIsCompatible()) {
 
/* -----------------------------------------------*/
/* Zone functions                                 */
/* ---------------------------------------------- */
 
// Transformation d'une adresse en coordonnées
function showAddress(address) {
  if (geocoder) {
    geocoder.getLatLng(
          address,
          function(point) {
            if (!point) { // Adresse non connue par Google Maps
              alert(address + " not found");
            }
            else {
                var marker = new GMarker(point);
                icon.image = points[i]['icon'];
                map.addOverlay(new GMarker(point, icon));
                i++;
            }
          }
    );
  }
};
 
/* FIN zone functions ------------------------------------------------------- */
 
// Déclaration des variables
 
// création de l'objet map
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(46.042735, 3.955078),5);
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
 
  var geocoder = new GClientGeocoder();
  var points = new Array();
  var i = 0;
 
  points[0] = new Array();
  points[0]['icon'] = "./images/icone_1.png";
 
  points[1] = new Array();
  points[1]['icon'] = "./images/icone_2.png";
 
  points[2] = new Array();
  points[2]['icon'] = "./images/icone_3.png";
 
  points[3] = new Array();
  points[3]['icon'] = "./images/icone_4.png";
 
  /* définition d'une classe d'icône */
  var icon = new GIcon();
  icon.shadow = "./images/shadow_1.png";
  icon.iconSize = new GSize(32, 32);
  icon.shadowSize = new GSize(56, 32);
  icon.iconAnchor = new GPoint(6, 20);
  icon.infoWindowAnchor = new GPoint(5, 1);
 
}
else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>

A+

**Bm3w325i** · 08/11/2008, 20h10

merci pour les infos je vais essayer ^^

**Bm3w325i** · 12/11/2008, 14h35

Je viens d'essayer et cela marche très bien merci, cependant comment faire pour automatise le Array, car pour un 10aine de point c'est assez facile mais dans le cas d'un nombre bien plus élevé cela ce complique.
J'avais pensé a quelque chose comme ca:

remplacer:

Code :

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

1
2
3
 
points[1]['icon'] = "./markers/marker2.png";
points[2] = new Array();

par

Code :

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

1
2
points[i]['icon'] = "./markers/marker "+[i]+".png";
points[i] = new Array();

Invité · 12/11/2008, 15h54

Bonjour,

Tu peux aller voir ICI

Change la lettre par un nombre

A+

**Bm3w325i** · 19/11/2008, 17h42

Pour automatiser je n'y suis pas arrivé mais ce n'est pas très grave, j'ai cependant un problème, depuis que j'ai appliqué des icônes perso, lors de la création de marker la vue ne se centre plus sur les markers crées.

p: des idées pour générer l'url de la map créer afin de l'exploiter sur un site?
merci

markers par ordre chronologique

APIs Google

Discussions similaires

Partager

Partager