Changer la couleur du marqueur Google Maps v3 lors du survol de l'élément en dehors de la carte

Question

Je cherche à faire en sorte que lorsque un élément html est survolé, le code couleur d'un marqueur dans l'api Google Maps v3 change.

Voici le code Google Maps:

$(document).ready(function(){
var markers;
var map;
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
markers = new Array();

var mapOptions = {
    zoom: 0, //Réglé à 0 car nous utilisons un format automatique avec les limites
    disableDefaultUI: true,
    zoomControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.fitBounds(bounds);

$("#map_list ul li").each(function(index) {
    var markerLatLng = new google.maps.LatLng($(this).children(".marker_lat").text(), $(this).children(".marker_long").text());
    var marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    animation: google.maps.Animation.DROP,
    title : $(this).children(".marker_title").text(),
    brief: $(this).children(".marker_brief").text(),
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+$(this).children(".marker_number").text()+'|ff0000|000000'
    });

    markers.push(marker);
    //ajouter aux limites pour le centrage et le zoom automatiques
    bounds.extend(markerLatLng);    
});

});

Il crée dynamiquement les marqueurs à partir de mon html dans la page web qui ressemble à ceci:

        1
        The Wedding Center
        45.361885
        -122.599007

        2
        The Reception Place
        45.417870
        -122.658531

Comment puis-je faire en sorte que lorsque je survole un #map_list ul li, il change le code couleur 00aeef en ff0000?

Answer 1

Exemple traduit du tutoriel v2 de Mike Williams (change simplement l'icône du marqueur au survol d'un élément HTML dans la barre latérale).

Code pour changer le marqueur au survol/sortie de la souris :

// Une fonction pour créer le marqueur et configurer la fenêtre de l'événement
function createMarker(latlng, name, html, color) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    icon: gicons[color],
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
  });
  // Changer l'icône du marqueur au survol et à la sortie de la souris
  google.maps.event.addListener(marker, "mouseover", function() {
    marker.setIcon(gicons["yellow"]);
  });
  google.maps.event.addListener(marker, "mouseout", function() {
    marker.setIcon(gicons["blue"]);
  });
  gmarkers.push(marker);
  // ajouter une ligne au html de la barre latérale
  var marker_num = gmarkers.length-1;
  side_bar_html += '' + name + '<\/a>';
}

[](javascript:myclick(' + marker_num + '))

[](javascript:myclick(' + marker_num + '))Exemple utilisant KML/geoxml3

Answer 2

Vous pouvez essayer ceci:

$(document).ready(function(){
    var map, infowindow = new google.maps.InfoWindow(),
    bounds = new google.maps.LatLngBounds(), markers=[], 
    alternateMarkers=[], markersIcon=[];
    var mapOptions = {
        zoom: 0, //Réglé sur 0 car nous utilisons un format automatique avec bounds
        disableDefaultUI: true,
        zoomControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    map.fitBounds(bounds);

    $("#map_list ul li").each(function(index) {
        var mTxt=$(this).children(".marker_number").text();
        var markerLatLng = new google.maps.LatLng($(this).children(".marker_lat").text(), $(this).children(".marker_long").text());
        var markImg=new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+mTxt+'|00aeef|000000');
        var altMarkImg=new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+mTxt+'|ff0000');
        var marker = new google.maps.Marker({
            position: markerLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            title : $(this).children(".marker_title").text(),
            brief: $(this).children(".marker_brief").text(),
            icon: markImg
    });
        markers.push(marker);
        markersIcon.push(markImg);
        alternateMarkers.push(altMarkImg);
        //ajouter aux limites pour le centrage automatique et le zoom
        bounds.extend(markerLatLng);
    });
    $("#map_list ul li").on('mouseenter', function(){
        var id=$(this).attr('id');
        markers[id].setIcon(alternateMarkers[id]);
    }).on('mouseleave', function(){
        var id=$(this).attr('id');
        markers[id].setIcon(markersIcon[id]);      
    });    
});​

démonstration fiddle