How to change icon color in Google Maps API V3?

Question

I want to change the COUNTY icon to blue (nothing but red).

Is there a way to define a different icon color for a specific point?

<script type="text/javascript"> //<![CDATA[ var map = null; function initialize() { var myOptions = { zoom: 8, center: new google.maps.LatLng(39.831125875,-112.15968925), mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // Add markers to the map // Set up three markers with info windows var point = new google.maps.LatLng(40.970826,-112.048187) var marker = createMarker(point,'Utah-Davis County'); var point = new google.maps.LatLng(40.235509,-111.660576) var marker = createMarker(point,'Utah-Provo'); var point = new google.maps.LatLng(40.766502,-111.897812) var marker = createMarker(point,'Utah-Salt Lake City'); } var infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150,50) }); function createMarker(latlng, html) { var contentString = html; var marker = new google.maps.Marker({ position: latlng, map: map, zIndex: Math.round(latlng.lat()*-100000)<<5 }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); } function animate(lati,long) { var latLng = new google.maps.LatLng(lati, long); //Makes a latlng map.panTo(latLng); //Make map global } //]]> </script> 

Is there a way to define a different icon color for a specific point?

Answer 1

I think this will help. You have to create a custom marker, though.

Google Maps API 3 - Custom marker color for the default marker (dot)

In particular, for your question, you can do something like this:

 var pinColor = "2F76EE"; // a random blue color that i picked var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34)); var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow", new google.maps.Size(40, 37), new google.maps.Point(0, 0), new google.maps.Point(12, 35)); 

then

 var marker = new google.maps.Marker({ position: new google.maps.LatLng(0,0), map: map, icon: pinImage, shadow: pinShadow }); 

matte burn credit