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