Dynamically change pin color Google Maps API

http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|996600 , you can change the last element to the color required

RED
http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FF0000 

YELLOW
http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00 

Read more here...

http://groups.google.com/group/google-chart-api/web/chart-types-for-map-pins?pli=1

http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html#Icons_overview

Hello bro!

Please find the link below hope that will help you

http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html#Polygons_Overview

Regards,

Asif Ahmed khan

here are several default icons in My Maps. Once you have created a placemarker you can change the default icon used by Google by editing the placemark and clicking on the picture of the icon in the description section. A bunch of other default icons will show up.
If none of the default icons is suitable then you can create your own and tell Google where are they hosted in the Internet. Use a 32x32 pixels image for custom icons.

Hi

Thanks for your contributions.  I am not a java script guru.  I find the google links very technical and for the expert designers.

I have a loop and I simply want to instead of all the statnard reg icons under certain circumstances repleace the standard red with say a yellow one - so the recent postings stand out from the older ones.  These links go on and on about shadows etc etc.  I just want to use the standard google markers/icons placers - but red normaly and yellow on exception depending on the data.

So I dont want to repalce the default icon. I just want to under certain conditions display a different standard google icon with different colur.

It still has to have all the google attributes of rollover and pop up with the descriptions when clicked on.

What is the java script modification to my code above?

Condition normal -  display the standard makert

Condition exception - dispaly the standard yellow marker

Thanks
ian

Here are your icons you want..

http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png

http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png

http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png

Here is what you need to set in your JS

So get the color you want, store it in a variable, let say myColor, depending on your condition and have this added to your MAP JS

// Create our "tiny" marker icon
var defaultIcon = new GIcon(G_DEFAULT_ICON);
defaultIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/<cfoutput>#myColor#</cfoutput>-dot.png";
               
// Set up our GMarkerOptions object
markerOptions = { icon:defaultIcon};

You just need to put up the logic to get red, yellow and Green...

something like

<cfif dateCompare('addDate',now()) ...>
     <cfset iconColor = 'red'>
<cfelseif .....
....
....


Then just add this to your code JS

//icon Code
var defaultIcon = new GIcon(G_DEFAULT_ICON);
defaultIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/<cfoutput>#iconColor#</cfoutput>-dot.png";
markerOptions = {icon:defaultIcon};
map.addOverlay(new GMarker(point, markerOptions));
//End icon code

Select allOpen in new window

Thanks for that.  However now I get no icons at all after adding the code suggested?

test running at:
http://www.housecarers.com/test/map_of_housesitters_required.cfm
running without changes at
http://www.housecarers.com/map_of_housesitters_required.cfm


See new code below.

Not sure what is happening now?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> 
		
<script type="text/javascript">   


	var map;
	function initialize() 
	{     
		
	var latlng = new google.maps.LatLng(<cfoutput>#OrigLat#</cfoutput>, <cfoutput>#OrigLng#</cfoutput>);     
	var myOptions = {       
					zoom:<cfoutput>#Zoom#</cfoutput>,       
					center: latlng,       
					mapTypeId: google.maps.MapTypeId.ROADMAP     
					};     
				
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);   



<CFIF isdefined ("url.lat")>
var location1 = new google.maps.LatLng(<cfoutput>#OrigLat#</cfoutput>, <cfoutput>#OrigLng#</cfoutput>);
var marker1 = new google.maps.Marker({position: location1,  map: map});
attachPopupMessage(marker1, '<cfoutput>#city#</cfoutput>', '<a href="<cfoutput>#link#</cfoutput>"><cfoutput>#city#</cfoutput></a><br><br><cfoutput>#summary#</cfoutput>');
<CFELSE>
<Cfset FilePath = "C:\Websites\blablabla.csv">

<cfquery name="RetrieveHousesits" datasource="HousesitExtract">
    SELECT * 
    FROM #filePath#
</cfquery>


<cfloop query = "RetrieveHousesits">
<cfset RowCount = RowCount + 1>

<cfoutput>
<cfset LinkText = "View Housesitter Required Ad for:" & " " & "#city#">	
</cfoutput>	

<cfoutput>
<cfset HoverText = "Click for housesit Details:" & " " & "#city#">	
</cfoutput>	

<cfif RetrieveHousesits.freshness is "today">
   <cfset IconColor = "green">
<cfelseif RetrieveHousesits.freshness is "yesterday">
   <cfset IconColor = "yellow">   
<cfelse>
   <cfset IconColor = "red">      
</cfif>

//icon Code
var defaultIcon = new GIcon(G_DEFAULT_ICON);
defaultIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/<cfoutput>#iconColor#</cfoutput>-dot.png";
markerOptions = {icon:defaultIcon};
map.addOverlay(new GMarker(point, markerOptions));
//End icon code 
var location<cfoutput>#RowCount#</cfoutput> = new google.maps.LatLng(<cfoutput>#lat#</cfoutput>, <cfoutput>#lng#</cfoutput>);
var marker<cfoutput>#RowCount#</cfoutput> = new google.maps.Marker({position: location<cfoutput>#RowCount#</cfoutput>,  map: map});
attachPopupMessage(marker<cfoutput>#RowCount#</cfoutput>, '<cfoutput>#HoverText#</cfoutput>', '<a href="<cfoutput>#url#</cfoutput>"><cfoutput>#linktext#</cfoutput></a><br><br><cfoutput>#summary#</cfoutput>');

</cfloop>
</CFIF>

	}  
		
	function attachPopupMessage(marker, title, msg) 
		{   
		marker.setTitle(title);     
		var infowindow = new google.maps.InfoWindow(
			{content: msg,         
					size: new google.maps.Size(50,50)
				});   
		
		google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);}); 
		}  
</script>

Select allOpen in new window

Hmm.. I can see the icons code correctly in view-source, let me check locally on what's going on.. may be some other setting is there...

Excellent - thanks for all your work, you are a legend - looks great. I will now put in a color legend

Regards
Ian

Thanks for looking into this and helping me with the java script code. This means a lot as didnt have a chance