Discussion :

[trc085]

Bonjours à toutes et à tous

Je suis toujours en train de tester google map v3 , et j'aurais souhaiter personnaliser les markers avec un mouseover , mais voilà la carte avec cette modif ne s'affiche plus , sans cela elle fonctionne impec .

comme dans ce tuto

Voici mon 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
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" >
  var infowindow;
  var map;
 
  function initialize() {
    var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
    var myOptions = {
      zoom: 13,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
 
      //changement sur le mouseover
  google.maps.event.addListener( oMarker, 'mouseover', function(){
    if( !this.flagIcon){
      this.savIcon = this.getIcon();  // récupération de l'image via la méthode getIcon()
      this.flagIcon = true;
    }
    this.setIcon( 'http://situation_sur_mon_site/photo.png');
  });
   //restauration sur le mouseout
  google.maps.event.addListener( oMarker, 'mouseout', function(){
    this.setIcon( this.savIcon);
  });
  //fin changement icone
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("moredata.xml", function(data) {
      var markers = data.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(markers[i].getAttribute("name"), latlng);
       }
     });
  }
 
  function createMarker(name, latlng) {
    var marker = new google.maps.Marker({position: latlng, map: map});
    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: name});
      infowindow.open(map, marker);
    });
    return marker;
  }
 
</script>

Mon idée ,la situation de la commande dans le code ne doit pas être bien placée.

Page concernée

Merci d'avance pour votre aide
Philippe

[NoSmoking]

Bonjour,
tu ne peux pas utiliser un objet avant de ne l'avoir crée, ici affectation d'un événement

Code :

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

1
2
3
4
5
6
7
  google.maps.event.addListener( oMarker, 'mouseover', function(){
    if( !this.flagIcon){
      this.savIcon = this.getIcon();  // récupération de l'image via la méthode getIcon()
      this.flagIcon = true;
    }
    this.setIcon( 'http://situation_sur_mon_site/photo.png');
  });

oMaker n'existe encore pas puisque tu le crée plus tard.

Il te faut donc mettre ces initialisations d'événements dans la fonction de création de tes marqueurs

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
function createMarker(name, latlng) {
  var oMarker = new google.maps.Marker({position: latlng, map: map});
  google.maps.event.addListener( oMarker, "click", function() {
    if (infowindow) infowindow.close();
    infowindow = new google.maps.InfoWindow({content: name});
    // infowindow.open(map, marker);
    // UTILISATION de this voir http://javascript.developpez.com/faq/google-maps/?page=InfoWindow#InfoWindowDernierMarker
    infowindow.open( this.getMap(), this);
  });
  //changement sur le mouseover
  google.maps.event.addListener( oMarker, 'mouseover', function(){
    if( !this.flagIcon){
      this.savIcon = this.getIcon();  // récupération de l'image via la méthode getIcon()
      this.flagIcon = true;
    }
    this.setIcon( 'http://situation_sur_mon_site/photo.png');
  });
   //restauration sur le mouseout
  google.maps.event.addListener( oMarker, 'mouseout', function(){
    this.setIcon( this.savIcon);
  });
  //fin changement icone
  return oMarker;
}

[trc085]

Encore une fois NoSmoking , merci

J'ai compris ,

Mais dans le code que tu m'as modifié il n'affiche plus qu'un seul marker , le premier dans la liste du fichier XML .

Fichier xml :

Code :

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

1
2
3
4
5
6
7
<?xml version="1.0" encoding="UTF-8"?>
<markers>
		<marker lng="-122.144841" lat="37.427770" name="Jackie"/>
		<marker lng="-122.125604" lat="37.413320" name="Peter"/>
		<marker lng="-122.139062" lat="37.433480" name="Mary"/>
		<marker lng="-122.162307" lat="37.445427" name="Puff " lien="http://xml.developpez.com/cours/?page=tech#tech_xml"/>
</markers>

Code 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
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>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Common Loader</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" >
  var infowindow;
  var map;
 
  function initialize() {
    var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
    var myOptions = {
      zoom: 13,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("moredata.xml", function(data) {
      var markers = data.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(markers[i].getAttribute("name"), latlng);
        }
     });
  }
 
  function createMarker(name, latlng) {
  var oMarker = new google.maps.Marker({position: latlng, map: map});
  google.maps.event.addListener( oMarker, "click", function() {
    if (infowindow) infowindow.close();
    infowindow = new google.maps.InfoWindow({content: name});
    // infowindow.open(map, marker);
    // UTILISATION de this voir http://javascript.developpez.com/faq/google-maps/?page=InfoWindow#InfoWindowDernierMarker
    infowindow.open( this.getMap(), this);
  });
  //changement sur le mouseover
  google.maps.event.addListener( oMarker, 'mouseover', function(){
    if( !this.flagIcon){
      this.savIcon = this.getIcon();  // récupération de l'image via la méthode getIcon()
      this.flagIcon = true;
    }
    this.setIcon( 'http://situation_sur_mon_site/photo.png');
  });
   //restauration sur le mouseout
  google.maps.event.addListener( oMarker, 'mouseout', function(){
    this.setIcon( this.savIcon);
  });
  //fin changement icone
 
 
    return marker;
  }
 
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:400px; height:300px"></div>
</body>
</html>

Une autre question :

Dans mon 1° post ici en fin de fil tu m'as corriger mon fichier xml pour avoir un lien dans mon infowindows , maintenant comment faire pour l'intégration dans la page html????
Depuis ce matin je cherche sur le net , les tutos je n'ai pas trouvé , je fais des essais mais les markers ou la carte disparait, rien ne fonctionne
J'ai essayer une balise <a href="">xxx</a> fonctionnne pas non plus !
Si tu le souhaite , je créerais un autre fil pour cela .

Tout ceci est vraiment complex , la v2 m'avait déjà fait passer des nuits blanches et des journées devant mon écran, mais je n'avait pas encore trouvé ce forum .

[NoSmoking]

attention, erreur de copié/collé
ligne 56 du code complet

Code :

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

    return marker;

doit être remplacé par

Code :

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

    return oMarker;

concernant le 2éme point cela dépend de la façon dont tu souhaites intégrer les liens dans ta page.

[trc085]

Pfffff !!!! putôt que de copier tout le code , voilà ce qui arrive encore une fois
Super !!!!!!!!! sa fonctionne impec

Pour le 2° point , en fait je souhaiterais mettre un petit texte avec un lien ou éventuellement une image clickable (voir les 2 ) genre armoirie de région dans l'info bulle qui lorsque le visiteur clic sur le lien ou l'image il soit directement orienté vers la page html concernée .


Il y aurais plusieurs markers que je metterais dans un fichier xml tel que les tests réalisé en ce moment .

Si je ne répond pas a ta question , je m'en excuse

Tu vas dire que je radote , mais chapeau bas !!!!

[NoSmoking]

concernant le point 2, il te faut savoir que le contenu des InfoWindow est du code HTML et peut contenir ce que l'on veut.

Il existe 2 façon de mettre du contenu dans une InfoWindow, soit en mettant du code HTML, soit en passant une référence à un élément référencé du DOM. Cette dernière façon de faire peut s'avérer intéressante dans le cas de code un peu complexe.

en partant du fichier XML suivant

Code xml :

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

1
2
3
4
5
6
7
<?xml version="1.0" encoding="UTF-8"?>
<markers>
    <marker lat="45.767299" lng="4.834329"  name="Lyon"/>
    <marker lat="44.837368" lng="-0.576144" name="Bordeaux"  image="http://javascript.developpez.com/faq/javascript/images/javascript-faq.gif" lien="http://javascript.developpez.com/faq/javascript/" />
    <marker lat="43.297612" lng=" 5.381042" name="Marseille" image="http://javascript.developpez.com/faq/google-maps/images/google-maps-faq.gif" lien="http://javascript.developpez.com/faq/google-maps/"/>
    <marker lat="48.856667" lng=" 2.350987" name="Paris"     image="http://xml.developpez.com/faq/images/FAQ_XML.gif" lien="http://xml.developpez.com/faq/" />
</markers>

contenant un lien et une image on peut tout à fait récupérer comme tu le fait pour la lat, lng et name, les données à afficher.

Il ne reste qu'à formater un peu et de mettre du STYLE à tout cela.

Sur base de ce que tu as déjà fait cela pourrait donner

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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>infoWindow.setContent()</title>
<style type="text/css">
html, body{
  margin:0;
  padding:0;
  height:100%;
  font-size : 1em;
  font-family: verdana;
}
#map_canvas{
  width:600px;
  height:600px;
  margin:50px auto;
  border:1px solid #808080;
}
.infobulle{
  font-size:.75em;
  overflow-x:hidden;
}
.infobulle h1{
  font-size : 2.0em;
  color:#1F4E9E;
  background-color:#A4C0EF;
  border:1px solid #5E81BE;
  margin:0;
  padding:2px;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" >
var infowindow;
var oMap;
function initCarte(){
  var myLatlng = new google.maps.LatLng( 46.80, 1.70);
  var myOptions = {
    'zoom': 6,
    'center': myLatlng,
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  }
 
  oMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
  downloadUrl("moredata.xml", function(data) {
    var markers = data.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var latlng = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng"))
        );
      // récupération du lien
      var sInfo  = markers[i].getAttribute("lien");
      var sImage = markers[i].getAttribute("image");
      var marker = createMarker( markers[i].getAttribute("name"), latlng, sInfo, sImage);
    }
  });
}
 
function createMarker( name, latlng, lien, image){
  var oMarker = new google.maps.Marker({
      'position': latlng,
      'map': oMap
    });
  google.maps.event.addListener( oMarker, "click", function() {
    if( infowindow){
      infowindow.close();
    }
    // création du contenu HTML
    var sTxt  = name ?  '<h1>' +name +'<\/h1>': '';
        sTxt += image ? '<br><img src="' +image +'">' : '';
        sTxt += lien  ? '<br><a href="' +lien +'" target="__">' +lien +'<\/a>' : '';
 
    infowindow = new google.maps.InfoWindow({
        'content': '<div class="infobulle">' + sTxt +'<br>&nbsp;<\/div>'
      });
    infowindow.open( this.getMap(), this);
  });
  //changement sur le mouseover
  google.maps.event.addListener( oMarker, 'mouseover', function(){
    if( !this.flagIcon){
      this.savIcon = this.getIcon();  // récupération de l'image via la méthode getIcon()
      this.flagIcon = true;
    }
    this.setIcon( 'http://www.photos-et-panoramas.fr/sph/pictures/photo.png');
  });
  //restauration sur le mouseout
  google.maps.event.addListener( oMarker, 'mouseout', function(){
    this.setIcon( this.savIcon);
  });
  //fin changement icone
  return oMarker;
}
// init lorsque la page est chargée
google.maps.event.addDomListener( window, 'load', initCarte);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

la function createMarker pourrait être optimisée en passant directement markers[i] en paramètre et faire la récupération et le formatage dans celle ci.

[trc085]

NoSmoking , un très grand MERCI à toi

Je viens d'intégrer le code html dans ma propre page de test ici et cela fonctionne à la perfection , exactement ce que je cherchais depuis un bon bout de temps.


J'ai juste mis les commandes de mise en page des infos bulles dans ma page css.

Il ne me reste plus qu'a adapter les images , lat long et liens à mon utilisation , ce qu'il ne devrait pas pauser trop de souci .

Encore une fois merci beaucoup pour ton aide et le temps que tu as dû prendre pour m'aider .

Salutations
Philippe

[NoSmoking]

2 petites remarques au sujet du lien que tu indiques

- dans <body onload="initialize()">, il te faut supprimer onload="initialize()" qui n'a plus lieu d'être.

- dans <div id="map_canvas" style="width: 800px; height: 700px"></div>, tu peux supprimer style="width: 800px; height: 700px" qui est pris en charge dans la partie STYLE.

Encore une fois merci beaucoup pour ton aide et le temps que tu as dû prendre pour m'aider .

RIEN RIEN, si cela nous dérangeait on ne le ferait pas

[trc085]

Bonsoir NoSmoking
Je vois que tu suis tes zouayes , et que tu as l'oeil et j'en suis heureux

- dans <body onload="initialize()">, il te faut supprimer onload="initialize()" qui n'a plus lieu d'être.

Modification faite

- dans <div id="map_canvas" style="width: 800px; height: 700px"></div>, tu peux supprimer style="width: 800px; height: 700px" qui est pris en charge dans la partie STYLE.

J'ai tester et la carte ne s'affiche plus , si je supprime le style.

Si je remet le style dans la ligne<div id="map_canvas" style="width: 800px; height: 700px"></div>, cela re-fonctionne .

Il y a quelque chose qui ne doit pas être bon ??
Je te met le code css concernant la mise en page de la carte:

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
 
/*positionner la carte dans la page*/
#map_canvas /*map*/
{
		width: 800px;
		margin-top: 5%;
		margin-left: auto;
		margin-right: auto;
		color: black;
		}
 
/* mise en page infobulle */
.infobulle{
		font-size:.75em;
		overflow-x:hidden;
}
 
.infobulle h1{
		font-size : 2.0em;
		color:#1F4E9E;
		background-color:#A4C0EF;
		border:1px solid #5E81BE;
		margin:0;
		padding:2px;
}

Merci encore , je me répète mais bon

Bonne soirée
Philippe

[NoSmoking]

il te manque la hauteur impérative http://javascript.developpez.com/faq...fichageComplet

Code css :

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

1
2
3
4
5
6
7
8
9
#map_canvas /*map*/
{
    width: 800px;
    height:700px;   /* IMPERATIF */
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    color: black;
}

[trc085]

Merci NoSmoking

Je test cela ce soir , et tiens au courant .

Bonne journée

Philippe

[trc085]

C'est tout bon NoSmoking, cela fonctionne avec la modification du code CSS et de la page html .

Je ne sais pas ce que j'ai fais hier soir , il me semble avoir testé cette option sans résultats, Je n'avais pas trop le temps hier de regarder j'aurais dû attendre , pour regarder cette modif à tête reposé

Je te remercie encore et encore mais je ne peux rien faire d'autre , si ........t'être reconnaissant .

Bonne soirée à toutes et à tous

[trc085]

Bonjour

En étudiant le code ,Je me rend compte que dans l'info-bulle , l'info "name" ne s'affiche pas .

Code :

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

1
2
3
4
5
6
7
<?xml version="1.0" encoding="UTF-8"?>
<markers>
    <marker lat="45.767299" lng="4.834329"  name="Lyon"/>
    <marker lat="44.837368" lng="-0.576144" name="Bordeaux"  image="http://javascript.developpez.com/faq/javascript/images/javascript-faq.gif" lien="http://javascript.developpez.com/faq/javascript/" />
    <marker lat="43.297612" lng=" 5.381042" name="Marseille" image="http://javascript.developpez.com/faq/google-maps/images/google-maps-faq.gif" lien="http://javascript.developpez.com/faq/google-maps/"/>
    <marker lat="48.856667" lng=" 2.350987" name="Paris"     image="http://xml.developpez.com/faq/images/FAQ_XML.gif" lien="http://xml.developpez.com/faq/" />
</markers>

Je me demande s'il ne manquerait pas un signe "+" a ce niveau

Code :

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

var sTxt  = name ?  '<h1>' +name +'<\/h1>': '';

Je ne pourrais pas tester mon idée avant ce soir , si j'ai un peu un peu de temps .

Code :

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

1
2
3
4
5
6
7
8
9
10
// création du contenu HTML
    var sTxt  = name ?  '<h1>' +name +'<\/h1>': '';
        sTxt += image ? '<br><img src="' +image +'">' : '';
        sTxt += lien  ? '<br><a href="' +lien +'" target="__">' +lien +'<\/a>' : '';
 
    infowindow = new google.maps.InfoWindow({
        'content': '<div class="infobulle">' + sTxt +'<br>&nbsp;<\/div>'
      });
    infowindow.open( this.getMap(), this);
  });

Merci
Bonne journée à toutes et à tous

[NoSmoking]

En étudiant le code ,Je me rend compte que dans l'info-bulle , l'info "name" ne s'affiche pas .

c'est le code du CSS qu'il te faut regarder, tu y trouveras

Code css :

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

1
2
3
h1 {
    text-indent: -50000px;
}

le -50000px fait que le titre est hors de la fenêtre d'affichage.

[trc085]

Bonsoir NoSmoking

Encore une fois , tu vois tous

Merci je n'avais point vue cette anomalie dans mon code

Merci beaucoup, ce coup-ci je pense que c'est bon .