Dynamically change pin color Google Maps API

I use the standard google java script api:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
 to poplulate a map of global housesits  from my database.  See:
http://www.housecarers.com/map_of_housesitters_required.cfm

The default pin color is red.  I would like to dynamically chang pin color to Yellow for posts for
today (taken from creationdate on database) and Green for Yesterday. The others to stay red.
No problem to get data - but what/how Google Java Script  parameters do I set.

ColdFusion 6 application.  Google Java Script API

Thanks for your help
<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);   


<!--- if single location passed in just one pin - else populate from database --->
<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>

<!--- Populate from database --->
<Cfset FilePath = "C:\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>	

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>

Open in new window

Ian WhiteOwner and FounderAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

khan_webguruCommented:
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
0
khan_webguruCommented:
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.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Ian WhiteOwner and FounderAuthor Commented:
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
0
Brijesh ChauhanStaff IT EngineerCommented:
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};
0
Brijesh ChauhanStaff IT EngineerCommented:
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

Open in new window

0
Ian WhiteOwner and FounderAuthor Commented:
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>

Open in new window

0
Brijesh ChauhanStaff IT EngineerCommented:
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...
0
Brijesh ChauhanStaff IT EngineerCommented:
You are using V3 of maps API, try the below changed code.. I test it.. it works...


<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 image<cfoutput>#RowCount#</cfoutput> = "http://www.google.com/intl/en_us/mapfiles/ms/micons/<cfoutput>#iconColor#</cfoutput>-dot.png";
//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, icon: image<cfoutput>#RowCount#</cfoutput>});
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>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ian WhiteOwner and FounderAuthor Commented:
Excellent - thanks for all your work, you are a legend - looks great. I will now put in a color legend

Regards
Ian
0
Ian WhiteOwner and FounderAuthor Commented:
Thanks for looking into this and helping me with the java script code. This means a lot as didnt have a chance
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.