[Gmap3] Amélioration de code

Résolu/Fermé
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 - 20 oct. 2014 à 16:29
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 - 23 oct. 2014 à 16:57
Bonjour,

Je cherche à améliorer mon code qui affiche le résultat d'une liste d'adresse dans une map.

Voici mon code :

Tout commence par une zone de saisie où un utilisateur rentre le nom d'une ville :

<div class="recherche-container">
<input type="text" id="recherche" />
<span class="btn-recherche" onclick="chercher_station();">
<span class="icon-triangle-right"></span>
<span><?php echo $this->__('Lancer la recherche') ?></span>
</span>
</div>


La fonction chercher_station() récupère des "stations" contenant un nom et une adresse.

function chercher_station()
{

$jq("#lightbox_detail_station").hide()

var req = $jq("#recherche").val();
if(req != "") {
$jq(".recherche-titre").html('Voici le résultat de la recherche pour ' +req);
$jq.ajax(
{
type:"GET",
data:"q="+req,
url:"<?php echo Mage::getBaseUrl('web')?>ajax/get_stations.php",
success:function(msg)
{
var data = JSON.parse(msg);
var values_html = "";
var tab_adr = new Array(result);

for (c=0;c < data.data.length; c++)

{
var id = data.data[c].id;
var nom = data.data[c].nom;
var addr = data.data[c].addr;
var result = {'address': addr, 'data': nom };

tab_adr[c] = result;

values_html += '<li><a style="cursor:pointer;" onclick="getDetailStation('+id+')" ><h4>'+nom+'</h4></a><div class="adresse">'+addr+'</div></li>';

$jq(".listing").html(values_html);
$jq(".listing").fadeIn();

}

var address = req+", FRANCE";
$jq(".wrapper-map, .list-stations, #map").fadeIn();
affichMap(address, tab_adr);
}
});
}
}

Je place chaque station dans une variable : var result = {'address': addr, 'data': nom };, ensuite je place chaque résultat dans un tableau : var tab_adr = new Array(result);
Ensuite je mets les stations dans une liste :

<li><a style="cursor:pointer;" onclick="getDetailStation('+id+')" ><h4>'+nom+'</h4></a><div class="adresse">'+addr+'</div></li>


Pour finir, la fonction affichMap() crée la map grâce aux paramètres address et tab_adr

function affichMap(adr, table_adr) {


// TODO Selection marker au survol du nom
if($jq('#map *').length>0){
$jq('#map').gmap3('destroy').remove();
$jq('.wrapper-map').append('<div id="map"></div>');
}

$jq("#map").gmap3({
map:{
address:adr,
options:{
zoom:11,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
},
marker:{
values:table_adr,
options:{
draggable: false,
animation: google.maps.Animation.DROP,
//options :{animation: google.maps.Animation.BOUNCE}
},
events:{
mouseover: function(marker, event, context){
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data}
}
});
}
},
mouseout: function(){
var infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.close();
}
}
}
}
});

}

Le code fonctionne parfaitement, la liste et la map sont bien affichées.
Maintenant ce que je cherche à faire ( sans succès ) est qu'au survol d'un nom de station de la liste, le marker s'anime par des rebonds OU au survol d'un marker, la station correspondante dans la liste soit mis en surbrillance (couleur).

Je sèche totalement depuis 2 jours. Merci à celui qui saura m'expliquer avec mon code ou un autre.
A voir également:

1 réponse

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
23 oct. 2014 à 16:57
Après quelques heures de code, j'ai trouvé la solution !
0