Discussion :

[Lo²]

Bonjour à tous,

Je suis en train de m'amuser à intégrer Googlemap dans une application.
J'arrive entre autre à afficher un itinéraire multi-points.

Le problème sur lequel je tombe est l'ajout d'InfoWindow personnalisé sur les différentes étapes.

Voici un bout de 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
 
...
directionsDisplay.setMap(maCarte);
directionsDisplay.setPanel(document.getElementById("EmplacementItineraireTexte"));
var requeteItineraire = {
  origin: "monAdresse1",
  destination: "monAdresse2",
  travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(requeteItineraire, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
    var address = "monAdresse1"; 
    geocoder.geocode( { 'address': address}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
            var marker = new google.maps.Marker({ 
              map: maCarte,  
              position: results[0].geometry.location 
            }); 
            maCarte.addOverlay(marker);
            google.maps.event.addListener(marker, 'click', function() {
              infowindow1.open(maCarte,marker);
            });
         } 
    }); }
...

Ce code affiche bien l'itinéraire entre les 2 points, mais l'InfoWindow que je pensais mettre sur "monAdresse1" n'y est pas, mais l'InfoWindow par défaut s'affiche bien.

Voyez-vous quelque chose qui ne va pas ?
A noter, que ça fait 2 jours que je suis sur JS, donc je n'utilise peut-être pas les bons termes pour vous expliquer et vous comprendre

Merci à tous

[Lo²]

ok, trouvé, j'avais pas mal d'erreur dans les déclarations de variable, donc c'est bon j'arrive bien à afficher des nouveaux markers avec des Infowindows personnalisées 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
 
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var maCarte;
var geocoder;
var myOptions;
function initialize() {
  geocoder = new google.maps.Geocoder();
  directionsDisplay = new google.maps.DirectionsRenderer();
  var latlng = new google.maps.LatLng(0,0); 
  myOptions = { 
    zoom: 7, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.HYBRID
  }; 
  maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), myOptions);
  var requeteItineraire = {
    origin: "monAdresse1",
    destination: "monAdresse2",
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    'Toto is here !!' +
    '</div>'+
    '</div>';
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });
  directionsService.route(requeteItineraire, function(response, dirstatus) {
    if (dirstatus == google.maps.DirectionsStatus.OK) {
        var address = "monAdresse3";
        geocoder.geocode( { 'address': address}, function(results, geostatus) {
          if (geostatus == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
              map: maCarte, 
              position: results[0].geometry.location
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(maCarte,marker);
            });
          } else {
            alert("Geocode was not successful for the following reason: " + geostatus);
          }
        });
       directionsDisplay.setMap(maCarte);
       directionsDisplay.setPanel(document.getElementById("EmplacementItineraireTexte"));
       directionsDisplay.setDirections(response);
     } else {
       alert("Direction was not successful for the following reason: " + dirstatus);
     }
  });
}

Maintenant, il n'y a plus qu'à chercher pour modifier les infoWindows par défaut des différents points de l'itinéraire, une idée ?

[emmanuel.remy]

Salut,

Si tu veux utiliser une seule InfoWindow, tu peux changer pour chaque clic de marker le contenu de l'infowindow, en utilisant sa fonction setContent

ERE

[Lo²]

Merci pour l'info.

Je met ça de côté le temps de voir si on va plus loin car vu les coûts d'utilisation des API Google, Mappy et consor, je ne suis pas certain qu'on aille très loin.

a+
et merci

[neslehavre]

Bonjour;
j'ai une application se rassemble a google map ,aprés un calcul de plus court chemin entre la ville de départ et la ville d'arrivée avec Dikjestra
je voudrai savoir comment afficher l'itinéraire sur la carte
s'il vous plait ,j'ai besoin de vos aides et vos conseils
merci d'avance.

[Lo²]

Bonjour,

La documentation en ligne de GoogleMaps est très bien faite.

Voici un lien à partir duquel tu vas pouvoir t'amuser :


Sur la partie gauche, tu verras d'autres liens (overlays, events, etc...)

Pour aller au plus simple, la méthode que j'ai utilisé a été de créer un fichier HTM dans lequel je génére le code HTML et Javascript.

Ensuite j'ouvre ce fichier dans un champ HTML.

[abdel_5180]

Bonjour

Tu t'amuse avec le code de google map.
c'est bien vous êtes forte.