We help IT Professionals succeed at work.

Draw a circle on Google map

7,694 Views
Last Modified: 2012-05-11
I will have a google map with one pin with a lat and long.  I want to draw a circle around that pin depending on a kilometer value (radius) entered by the user/member.  I use cold fusion/ sqle server .and the google map api

The circle would need to repond to zooming etc.

Thanks for the code to do this

Comment
Watch Question

Brijesh ChauhanStaff IT Engineer

Commented:
Depends on the version of maps api that you are using, I think you are using Version 3. There is a google.maps.circle object which you can use.. below is the code

var map; // map object 
var radius; // Radius of circle in miles. 
var center; // LatLng of center point of circle 
var draw_circle = null;  // object of google maps polygon for redrawing the circle 
function DrawCircle(rad) {    
rad *= 1600; // convert to meters if in miles   
if (draw_circle != null) {      
draw_circle.setMap(null);   
}   
draw_circle = new google.maps.Circle({      
center: center,      
radius: rad,      
strokeColor: "#FF0000",     
 strokeOpacity: 0.8,      
strokeWeight: 2,      
fillColor: "#FF0000",      
fillOpacity: 0.35,      
map: map   });
}

Open in new window


http://enbake.com/draw-circle-with-google-maps-api-v3
Ian WhiteOwner and Founder

Author

Commented:
Thanks - how would I integrate into this code


<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);  

<!---  when mapping a single housesit --->      

<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>');
Brijesh ChauhanStaff IT Engineer

Commented:
You need to ADD this code after the <CFIF isDefined("url.lat")>

var citimap = {};
citimap['YourName'] = {
	center: new google.maps.latlng('PUT LAT LONG HERE');
	radius : .01 // PUT RADIUS HERE IN METERS
};
var populationOptions = {
strokeColor: "##FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "##FF0000",
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: citymap[city].radius
}; 
var cityCircle = new google.maps.Circle(populationOptions);

Open in new window


Basically, 1) You need to identify ALL the points where you want to have CIRCLE on your map, in the above code these are stores in citiMap. 2) For each place you need to circle, you will have to define the CENTER and RADIUS, one point example is above, the radius is defined in METERS...
Brijesh ChauhanStaff IT Engineer

Commented:
Try something like below...
<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);  

<!---  when mapping a single housesit --->      

<CFIF isdefined ("url.lat")>
// CIRCLE CODE
var citimap = {};
citimap['location1'] = {
	center: new google.maps.latlng('<cfoutput>#OrigLat#</cfoutput>, <cfoutput>#OrigLng#</cfoutput>');
	radius : .01 // PUT RADIUS HERE IN METERS
};
var populationOptions = {
strokeColor: "##FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "##FF0000",
fillOpacity: 0.35,
map: map,
center: citymap[location1].center,
radius: citymap[location1].radius 
}; 
var cityCircle = new google.maps.Circle(populationOptions);
//END circle
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>');

Open in new window

Ian WhiteOwner and Founder

Author

Commented:
I tried that but I just get a blank page?
Ian WhiteOwner and Founder

Author

Commented:
Does anyone have code from a working example ?
Ian WhiteOwner and Founder

Author

Commented:
It is the case where we have mem passed in url. Thanks
<!DOCTYPE html> 
<html> <head> 
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
	<style type="text/css">   
		html { height: 100% }   
		body { height: 100%; margin: 0px; padding: 0px }   
		#map_canvas { height: 100% } 
	</style> 
<CF_Determine_Country>	
	
<cfparam name             = "RowCount"     type="numeric" default=0/>
<cfparam name             = "OrigLat"      type="numeric" default=-36.7333330/>
<cfparam name             = "OrigLng"      type="numeric" default=146.9666670/>
<cfparam name             = "Zoom"         type="numeric" default=5/>
<cfparam name             = "LinkText"     type="string" default=""/>
<cfparam name             = "housesit_url" type="string" default="./search_detail_housesit.cfm?id=" />
<cfparam name             = "LineFeed"     type="string" default="<BR>" />


<CFIF NOT isdefined ("url.region")>
      <cfset url.region ="default">
	  <CF_Determine_Country>
  <CFSWITCH EXPRESSION="#BrowserCountry#">
  <CFCASE VALUE="USA">
  	<cfset url.region  = "USA">
  </CFCASE>
   <CFCASE VALUE="Canada">
     <cfset url.region  = "Canads">
  </CFCASE>
  <CFCASE VALUE="England">
   <cfset url.region  = "Europe">
  </CFCASE>
  <CFCASE VALUE="South Africa">
   <cfset url.region  = "Africa">
  </CFCASE>
    <CFCASE VALUE="Australia">
    <cfset url.region  = "Australia">
  </CFCASE>
      <CFCASE VALUE="New Zealand">
 		<cfset url.region  = "New Zealand">
  </CFCASE>
  <CFDEFAULTCASE>
  <cfset url.region  = "World">
  </CFDEFAULTCASE>
</CFSWITCH>
	  
</cfif>

<CFIF isdefined ("url.lat")>
   
  <cfset Zoom = 12>
  <cfset OrigLat = url.lat>
  <cfset OrigLng = url.lng>

  <cfset city = url.city>
  <cfset link = url.link>
  <cfset summary = url.summary>
  
<CFELSEIF isdefined ("url.mem")>
<CFQUERY name="New_Homeowner_Profiles" dataSource="XXX">
    SELECT 
    	*
      
    FROM Members
    WHERE MemberId = #URL.mem#

</CFQUERY>
   
  <cfset Zoom = "12">
  <cfset OrigLat = New_Homeowner_Profiles.lattitude>
  <cfset OrigLng =  New_Homeowner_Profiles.longitude>

<CFELSE>
<CFSWITCH EXPRESSION="#url.region#">
  <CFCASE VALUE="USA">
  	<cfset OrigLat = "37.6922361">
  	<cfset OrigLng = "-97.3375448">
	<cfset Zoom    = "4">
  </CFCASE>
   <CFCASE VALUE="Canada">
  	<cfset OrigLat = "56.1303660">
  	<cfset OrigLng = "-106.3467710">
	<cfset Zoom    = "4">
  </CFCASE>
  <CFCASE VALUE="Europe">
  	<cfset OrigLat = "48.8566667">
  	<cfset OrigLng = "2.3509871">
	<cfset Zoom    = "4">
  </CFCASE>
  <CFCASE VALUE="China">
  	<cfset OrigLat = "35.86166">
  	<cfset OrigLng = "104.195397">
	<cfset Zoom    = "4">
  </CFCASE>
  <CFCASE VALUE="Brazil">
  	<cfset OrigLat = "-14.235004">
  	<cfset OrigLng = "-51.92528">
	<cfset Zoom    = "3">
  </CFCASE>
  <CFCASE VALUE="Africa">
  	<cfset OrigLat = "-13.1338970">
  	<cfset OrigLng = "27.8493320">
	<cfset Zoom    = "3">
  </CFCASE>
  <CFCASE VALUE="Oceania">
  	<cfset OrigLat = "-25.274398">
  	<cfset OrigLng = "133.775136">
	<cfset Zoom    = "3">
  </CFCASE>
    <CFCASE VALUE="Australia">
  	<cfset OrigLat = "-27.2743980">
  	<cfset OrigLng = "133.775136">
	<cfset Zoom    = "4">
  </CFCASE>
      <CFCASE VALUE="New Zealand">
  	<cfset OrigLat = "-40.9005570">
  	<cfset OrigLng = "174.8859710">
	<cfset Zoom    = "5">
  </CFCASE>
  <CFDEFAULTCASE>
  	<cfset OrigLat = "23.885942">
  	<cfset OrigLng = "45.079162">
	<cfset Zoom    = "2">
  </CFDEFAULTCASE>
</CFSWITCH>
</CFIF>

<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);   

<!---  when mapping a single housesit --->	

<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>');

<!---  when mapping a single housesit latter method 30/3/11 --->	
<CFELSEIF isdefined ("url.mem")>
	

<cfinclude template = "include_Extract_Map_Parameters.cfm">

<cfset lat = 			ExtractLat>
<cfset lng = 			ExtractLng> 
<cfset link = 			Extracturl> 
<cfset city = 			ExtractCity>
<cfset Summary = 		ExtractDescription>
<cfset Freshness  = 	HousesitFreshness>

<cfset RowCount =  1>

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

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

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

// CIRCLE CODE
var citimap = {};
citimap['location1'] = {
	center: new google.maps.latlng('<cfoutput>#OrigLat#</cfoutput>, <cfoutput>#OrigLng#</cfoutput>');
	radius : 1000 // PUT RADIUS HERE IN METERS
};
var populationOptions = {
strokeColor: "##FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "##FF0000",
fillOpacity: 0.35,
map: map,
center: citymap[location1].center,
radius: citymap[location1].radius 
}; 
var cityCircle = new google.maps.Circle(populationOptions);
//END circle

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>#hovertext#</cfoutput>', '<a href="<cfoutput>#link#</cfoutput>"><cfoutput>#linktext#</cfoutput></a><br><br><cfoutput>#summary#</cfoutput>');
<CFELSE>

<Cfset FilePath = "C:\Websites\XXX">

<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>#RetrieveHousesits.lat#</cfoutput>, <cfoutput>#RetrieveHousesits.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>#RetrieveHousesits.url#</cfoutput>"><cfoutput>#linktext#</cfoutput></a><br><br><cfoutput>#RetrieveHousesits.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> 
		
<link rel="stylesheet" type="text/css" href="./hcmap.css" />

<cfif IsDefined ("url.mem")>
<cfoutput>
	<title>House Sitters Required #city# Location Map </title>
	<META NAME="description" CONTENT="#summary#">
</cfoutput>	
<cfelse>
<cfoutput>
<title>Global Map of House Sitters Required: House sitting in #BrowserCountry# and around the world</title>
<META NAME="description" CONTENT="Housesit locations around the World shown on google map.  Select continent or Zoom to your 
location to view Housesitter required information">
</cfoutput>
</cfif>
</head>

<body onload="initialize()">


<div id="wrapper">
  
<div id="main">

<div id="content">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr><td valign="middle" align="center">
<a title="Home" href="./"><img src="./256.gif" alt="logo" border="0"/></a> 
</td>
<td valign="middle" align="center">
<a title="Get Notified of House Sitting opportunities" href="./join.cfm?co=Australia&ci=Sydney&st=NSW">Subscribe as a HouseSitter</a> &nbsp; &nbsp;
<a title="Post your confidential House Sitting opportunity" href="./join_houseowner.cfm?co=Australia&ci=Sydney&st=NSW">Subscribe as a HomeOwner</a> &nbsp; &nbsp;
<a title="Key Benefits of House Sitting for Homeowner and Housesitter" href="./housesitting_key_benefits_housesitter_owner.cfm">Find out more</a> &nbsp; &nbsp;
<cfif IsDefined ("url.mem")>
	<cfset DoNotDisplayPinLegend = "true">
<cfelse>

<br><br><span style="background-color:lime;">Green Pin = Todays Posting</span> &nbsp;<span style="background-color:yellow;">Yellow Pin = Yesterdays Posting</span>&nbsp;<span style="background-color:#F08080;"><b></b> Red Pin = Current Active Unfilled Housesits</b></span><br>

</cfif>



</td></tr>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="5">

<tr><td colspan="2" align="center">
<div id="map_canvas" style="align:center; width:850px; height:410px"></div> 
</td></tr>

</table>
</center>

		</div> <!-- content -->
	</div> <!-- main -->
  <div id="footer">
<center>	
<a href="./map_of_housesitters_required.cfm?region=USA">USA</a> - 
<a href="./map_of_housesitters_required.cfm?region=Canada">Canada</a> - 
<a href="./map_of_housesitters_required.cfm?region=Brazil">South America</a> - 
<a href="./map_of_housesitters_required.cfm?region=Africa">Africa</a> - 
<a href="./map_of_housesitters_required.cfm?region=Europe">Europe</a> - 
<a href="./map_of_housesitters_required.cfm?region=Oceania">Oceania</a> -
<a href="./map_of_housesitters_required.cfm?region=Australia">Australia</a> -
<a href="./map_of_housesitters_required.cfm?region=New Zealand">New Zealand</a> -
<a href="./map_of_housesitters_required.cfm?region=World">World</a>
</center>
  </div> <!-- footer -->
</div> <!-- wrapper -->

</body>
</html>

Open in new window

Brijesh ChauhanStaff IT Engineer

Commented:
Okay.. some variables wrongly defined and syntax error.. I tried the following after correcting and it works...

<!DOCTYPE html> 
<html> <head> 
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
	<style type="text/css">   
		html { height: 100% }   
		body { height: 100%; margin: 0px; padding: 0px }   
		#map_canvas { height: 100% } 
	</style> 
<CF_Determine_Country>	
	
<cfparam name             = "RowCount"     type="numeric" default=0/>
<cfparam name             = "OrigLat"      type="numeric" default=-36.7333330/>
<cfparam name             = "OrigLng"      type="numeric" default=146.9666670/>
<cfparam name             = "Zoom"         type="numeric" default=5/>
<cfparam name             = "LinkText"     type="string" default=""/>
<cfparam name             = "housesit_url" type="string" default="./search_detail_housesit.cfm?id=" />
<cfparam name             = "LineFeed"     type="string" default="<BR>" />


<CFIF NOT isdefined ("url.region")>
      <cfset url.region ="default">
	  <CF_Determine_Country>
  <CFSWITCH EXPRESSION="#BrowserCountry#">
  <CFCASE VALUE="USA">
  	<cfset url.region  = "USA">
  </CFCASE>
   <CFCASE VALUE="Canada">
     <cfset url.region  = "Canads">
  </CFCASE>
  <CFCASE VALUE="England">
   <cfset url.region  = "Europe">
  </CFCASE>
  <CFCASE VALUE="South Africa">
   <cfset url.region  = "Africa">
  </CFCASE>
    <CFCASE VALUE="Australia">
    <cfset url.region  = "Australia">
  </CFCASE>
      <CFCASE VALUE="New Zealand">
 		<cfset url.region  = "New Zealand">
  </CFCASE>
  <CFDEFAULTCASE>
  <cfset url.region  = "World">
  </CFDEFAULTCASE>
</CFSWITCH>
	  
</cfif>

<CFIF isdefined ("url.lat")>
   
  <cfset Zoom = 12>
  <cfset OrigLat = url.lat>
  <cfset OrigLng = url.lng>

  <cfset city = url.city>
  <cfset link = url.link>
  <cfset summary = url.summary>
  
<CFELSEIF isdefined ("url.mem")>
<CFQUERY name="New_Homeowner_Profiles" dataSource="XXX">
    SELECT 
    	*
      
    FROM Members
    WHERE MemberId = #URL.mem#

</CFQUERY>
   
  <cfset Zoom = "12">
  <cfset OrigLat = New_Homeowner_Profiles.lattitude>
  <cfset OrigLng =  New_Homeowner_Profiles.longitude>

<CFELSE>
<CFSWITCH EXPRESSION="#url.region#">
  <CFCASE VALUE="USA">
  	<cfset OrigLat = "37.6922361">
  	<cfset OrigLng = "-97.3375448">
	<cfset Zoom    = "4">
  </CFCASE>
   <CFCASE VALUE="Canada">
  	<cfset OrigLat = "56.1303660">
  	<cfset OrigLng = "-106.3467710">
	<cfset Zoom    = "4">
  </CFCASE>
  <CFCASE VALUE="Europe">
  	<cfset OrigLat = "48.8566667">
  	<cfset OrigLng = "2.3509871">
	<cfset Zoom    = "4">
  </CFCASE>
  <CFCASE VALUE="China">
  	<cfset OrigLat = "35.86166">
  	<cfset OrigLng = "104.195397">
	<cfset Zoom    = "4">
  </CFCASE>
  <CFCASE VALUE="Brazil">
  	<cfset OrigLat = "-14.235004">
  	<cfset OrigLng = "-51.92528">
	<cfset Zoom    = "3">
  </CFCASE>
  <CFCASE VALUE="Africa">
  	<cfset OrigLat = "-13.1338970">
  	<cfset OrigLng = "27.8493320">
	<cfset Zoom    = "3">
  </CFCASE>
  <CFCASE VALUE="Oceania">
  	<cfset OrigLat = "-25.274398">
  	<cfset OrigLng = "133.775136">
	<cfset Zoom    = "3">
  </CFCASE>
    <CFCASE VALUE="Australia">
  	<cfset OrigLat = "-27.2743980">
  	<cfset OrigLng = "133.775136">
	<cfset Zoom    = "4">
  </CFCASE>
      <CFCASE VALUE="New Zealand">
  	<cfset OrigLat = "-40.9005570">
  	<cfset OrigLng = "174.8859710">
	<cfset Zoom    = "5">
  </CFCASE>
  <CFDEFAULTCASE>
  	<cfset OrigLat = "23.885942">
  	<cfset OrigLng = "45.079162">
	<cfset Zoom    = "2">
  </CFDEFAULTCASE>
</CFSWITCH>
</CFIF>

<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);   

<!---  when mapping a single housesit --->	

<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>');

<!---  when mapping a single housesit latter method 30/3/11 --->	
<CFELSEIF isdefined ("url.mem")>
	

<cfinclude template = "include_Extract_Map_Parameters.cfm">

<cfset lat = 			ExtractLat>
<cfset lng = 			ExtractLng> 
<cfset link = 			Extracturl> 
<cfset city = 			ExtractCity>
<cfset Summary = 		ExtractDescription>
<cfset Freshness  = 	HousesitFreshness>

<cfset RowCount =  1>

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

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

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

// CIRCLE CODE
var citymap = {};
citymap['location1'] = {
	center: new google.maps.LatLng('<cfoutput>#OrigLat#</cfoutput>, <cfoutput>#OrigLng#</cfoutput>'),
	radius : 10000 
};
var populationOptions = {
strokeColor: "##FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "##FF0000",
fillOpacity: 0.35,
map: map,
center: citymap['location1'].center,
radius: citymap['location1'].radius 
}; 
var cityCircle = new google.maps.Circle(populationOptions);
//END circle

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>#hovertext#</cfoutput>', '<a href="<cfoutput>#link#</cfoutput>"><cfoutput>#linktext#</cfoutput></a><br><br><cfoutput>#summary#</cfoutput>');
<CFELSE>

<Cfset FilePath = "C:\Websites\XXX">

<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>#RetrieveHousesits.lat#</cfoutput>, <cfoutput>#RetrieveHousesits.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>#RetrieveHousesits.url#</cfoutput>"><cfoutput>#linktext#</cfoutput></a><br><br><cfoutput>#RetrieveHousesits.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> 
		
<link rel="stylesheet" type="text/css" href="./hcmap.css" />

<cfif IsDefined ("url.mem")>
<cfoutput>
	<title>House Sitters Required #city# Location Map </title>
	<META NAME="description" CONTENT="#summary#">
</cfoutput>	
<cfelse>
<cfoutput>
<title>Global Map of House Sitters Required: House sitting in #BrowserCountry# and around the world</title>
<META NAME="description" CONTENT="Housesit locations around the World shown on google map.  Select continent or Zoom to your 
location to view Housesitter required information">
</cfoutput>
</cfif>
</head>

<body onload="initialize()">


<div id="wrapper">
  
<div id="main">

<div id="content">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr><td valign="middle" align="center">
<a title="Home" href="./"><img src="./256.gif" alt="logo" border="0"/></a> 
</td>
<td valign="middle" align="center">
<a title="Get Notified of House Sitting opportunities" href="./join.cfm?co=Australia&ci=Sydney&st=NSW">Subscribe as a HouseSitter</a> &nbsp; &nbsp;
<a title="Post your confidential House Sitting opportunity" href="./join_houseowner.cfm?co=Australia&ci=Sydney&st=NSW">Subscribe as a HomeOwner</a> &nbsp; &nbsp;
<a title="Key Benefits of House Sitting for Homeowner and Housesitter" href="./housesitting_key_benefits_housesitter_owner.cfm">Find out more</a> &nbsp; &nbsp;
<cfif IsDefined ("url.mem")>
	<cfset DoNotDisplayPinLegend = "true">
<cfelse>

<br><br><span style="background-color:lime;">Green Pin = Todays Posting</span> &nbsp;<span style="background-color:yellow;">Yellow Pin = Yesterdays Posting</span>&nbsp;<span style="background-color:#F08080;"><b></b> Red Pin = Current Active Unfilled Housesits</b></span><br>

</cfif>



</td></tr>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="5">

<tr><td colspan="2" align="center">
<div id="map_canvas" style="align:center; width:850px; height:410px"></div> 
</td></tr>

</table>
</center>

		</div> <!-- content -->
	</div> <!-- main -->
  <div id="footer">
<center>	
<a href="./map_of_housesitters_required.cfm?region=USA">USA</a> - 
<a href="./map_of_housesitters_required.cfm?region=Canada">Canada</a> - 
<a href="./map_of_housesitters_required.cfm?region=Brazil">South America</a> - 
<a href="./map_of_housesitters_required.cfm?region=Africa">Africa</a> - 
<a href="./map_of_housesitters_required.cfm?region=Europe">Europe</a> - 
<a href="./map_of_housesitters_required.cfm?region=Oceania">Oceania</a> -
<a href="./map_of_housesitters_required.cfm?region=Australia">Australia</a> -
<a href="./map_of_housesitters_required.cfm?region=New Zealand">New Zealand</a> -
<a href="./map_of_housesitters_required.cfm?region=World">World</a>
</center>
  </div> <!-- footer -->
</div> <!-- wrapper -->

</body>
</html>

Open in new window

Staff IT Engineer
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Ian WhiteOwner and Founder

Author

Commented:
Sorry have been flat out on the biz will get to this asap. Big brother is onto me but we had to replace a server so I had to attend to all that involved including moving from CFMX to CF8 and the associated hiccups
Ian WhiteOwner and Founder

Author

Commented:
Thanks that worked fine

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.