Change google maps v3 marker color when hovering over map side

Question

I'm trying to make sure that when using the html element above the color code for the marker in google maps, api v3 will change.

Here is the google map 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 dynamically creates markers from my html on a 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 do this so that when I hover over #map_list ul li it changes the color code 00aeef to ff0000?

Answer 1

The example is translated from textbook v2 from Mike Williams (just changes the marker icon on hover over the HTML element in the sidebar).

Code for changing marker on mouse / mouse:

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

KML / geoxml3 example

Answer 2

You can try this (for some unknown reason, I cannot add an example to my answer, but I added a demo in the comment below).

 $(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]); }); });​