Pas d'affichage cartes + personalisation markers et liens dans fichiers xml

**trc085** · 03/03/2012, 12h15

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** · 03/03/2012, 14h16

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** · 03/03/2012, 15h23

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** · 03/03/2012, 16h19

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** · 03/03/2012, 17h06

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** · 04/03/2012, 18h00

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.

Pas d'affichage cartes + personalisation markers et liens dans fichiers xml [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager