Change color of google maps v3 marker on mouseover of element out side of map

Question

I'm trying to make it so that when an html element is moused over the color code for a marker in google maps api v3 will change.

Here is the google maps code:

$(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, //Set to 0 because we are using auto formatting w/ 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 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()+'|00aeef|000000'
    });

    markers.push(marker);
    //add to bounds for auto center and zoom
    bounds.extend(markerLatLng);    
});

});

It is dynamically building the markers from my html in the webpage that looks like this:

<div id="map_list">
<ul>             
     <li id="0">
        <div class="marker_number">1</div>
        <div class="marker_title">The Wedding Center</div>
        <div class="marker_lat">45.361885</div>
        <div class="marker_long">-122.599007</div>
      </li>
      <li id="1">
        <div class="marker_number">2</div>
        <div class="marker_title">The Reception Place</div>
        <div class="marker_lat">45.417870</div>
        <div class="marker_long">-122.658531</div>
      </li>
</ul>
 </div>

How can I make it so that when I mouse over a #map_list ul li it will change the color code 00aeef to ff0000?

Answer 1

Example translated from Mike Williams' v2 tutorial (just changes the marker icon on mouseover of an HTML element in the sidebar).

Code to change the marker on mouseover/mouseout:

// A function to create the marker and set up the event window function 
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);
  });
  // Switch icon on marker mouseover and mouseout
  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);
  // add a line to the side_bar html
  var marker_num = gmarkers.length-1;
  side_bar_html += '<a href="javascript:myclick(' + marker_num + ')" onmouseover="gmarkers['+marker_num+'].setIcon(gicons.yellow)" onmouseout="gmarkers['+marker_num+'].setIcon(gicons.blue)">' + name + '<\/a><br>';
}

Example using KML/geoxml3

Answer 2

You may try this:

$(document).ready(function(){
    var map, infowindow = new google.maps.InfoWindow(),
    bounds = new google.maps.LatLngBounds(), markers=[], 
    alternateMarkers=[], markersIcon=[];
    var mapOptions = {
        zoom: 0, //Set to 0 because we are using auto formatting w/ 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);
        //add to bounds for auto center and 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]);      
    });    
});​

demo fiddle