Gmap infos bulle

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by sergio634 on

Bonjour

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

Forum : 
Support général
Tags : 
Gmap
info bulle

Soumis par SebCorbin le 14 Juin, 2010 - 15:19

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 !

Soumis par SebCorbin le 14 Juin, 2010 - 17:09

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;
}