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?
 
Brijesh ChauhanConnect With a Mentor Staff 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
 
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.