Gmap infos bulle

Bonjour

est il possible de modifier les infos bulles (dans leur aspect) de gmap ?
merci pour votre aide

#

Oui, par contre il faut mettre les mains dans le camboui car ce n’est pas géré par le module de drupal.

Il existe une librairie qui permet de remplacer l’appel a InfoWindow par un extInfoWindow :
exemples ici http://gmaps-utility-library.googlecode.com/svn/trunk/extinfowindow/rele…
documentation ici http://gmaps-utility-library.googlecode.com/svn/trunk/extinfowindow/rele…
et source ici : http://gmaps-utility-library.googlecode.com/svn/trunk/extinfowindow/rele…

Bon courage !

#

ok merci pour ta réponse, j’avais déja repéré ces docs. Ca va être chaud, quand j’aurai compris le système (si j’y arrive), je posterai la procédure, ça peut aider quelqu’un d’autre. Bon, j’y vais !

#

Voici un petit début (il faut ajouter le js source) qui te fera sûrement avancer plus vite…

Le javascript qui permet d’override l’action d’un clic

/*
* Ajout de fonction à l'evenement click d'un marker
**/
Drupal.gmap.addHandler('gmap', function(elem) {
  var obj = this;

   obj.bind('clickmarker', function(marker) {
           //affichage de la popup
            if (marker.popup) { // marker.popup à définir/passer en php
                var map = Drupal.gmap.getMap( 'auto2map'); //récupération de la map
              marker.marker.openExtInfoWindow(
                 map.map,
               "info_window", //classe CSS utilisée
                 marker.popup, //texte à insérer
                {paddingY: 50} //décalage CSS
                );
                if( marker.dernier == "1") {
                 lastMarker = marker ;
                  var map = Drupal.gmap.getMap( 'auto2map');
                   ajax_getMeteo( marker, '#MeteoBateauContainer', map);
                    if( $('#sliding').css('display') == 'none')
                      $('#sliding').css('display', 'block') ;
              }
          }
      return;
    });
});

Le CSS qui va avec :

#info_window{
    width: 300px;
  margin-left: 65px;
}

#info_window_contents{
   background: url('./bg.png');
color: #FFF;
}

#Text #info_window_contents table{
color: #FFF;
   background: transparent;
}
#Text #info_window_contents table td, #Text #info_window_contents table tr, #Text #info_window_contents table tbody{
    border: none;
}

#info_window_beak{
    width: 120px;
  height: 48px;
  background: url('./beak.png');
}
* html #info_window_beak{
   /* Alpha transparencies hack for IE */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./beak.png', sizingMethod='crop');
}

#info_window_tl{
  background: url('./tl.png');
width: 6px;
    height: 7px;
}

#info_window_tr{
   background: url('./tr.png');
width: 6px;
    height: 7px;
}

#info_window_bl{
   background: url('./bl.png');
width: 7px;
    height: 8px;
}

#info_window_br{
   background: url('./br.png');
width: 6px;
    height: 8px;
}

#info_window_r, #info_window_l{
    background: url('./bg.png');
width: 7px;
}

#info_window_t, #info_window_b{
background: url('./bg.png');
height: 8px;
}

#info_window_close{
    background: url('./close.png');
  width: 14px;
   height: 14px;
  margin-top: 5px;
   margin-left: -5px;
cursor: pointer;
}

#

Salut alkaaran, pourrais-tu donner plus d’infos sur les fichiers à modifier (où ajouter le code javascript, etc…)

Merci d’avance !
Guillaume

Syndiquer le contenu