Ian White

asked on 5/17/2011

Draw a circle on Google map

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

ColdFusion LanguageJavaScript

Last Comment

Ian White

8/22/2022 - Mon

Mrunal

5/18/2011

you have to use: GPolyline object

see for more info:

http://jerschneid.blogspot.com/2008/12/simple-way-to-draw-circle-with-google.html

http://stackoverflow.com/questions/825794/draw-radius-around-a-point-in-google-map

http://www.freemaptools.com/radius-around-point.htm

http://www.birdtheme.org/useful/googletool.html

Brijesh Chauhan

5/18/2011

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

Brijesh Chauhan

5/18/2011

V3 API examples on Google Code..

http://code.google.com/apis/maps/documentation/javascript/overlays.html#Circles
http://code.google.com/apis/maps/documentation/javascript/examples/circle-simple.html

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

Ian White

5/18/2011

ASKER

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



<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 Chauhan

5/23/2011

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 Chauhan

5/23/2011

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

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Ian White

5/28/2011

ASKER

I tried that but I just get a blank page?

Ian White

5/28/2011

ASKER

Does anyone have code from a working example ?

Brijesh Chauhan

5/28/2011

Can you paste your code ?

example is already posted above

http://code.google.com/apis/maps/documentation/javascript/examples/circle-simple.html

Code

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

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

Ian White

5/30/2011

ASKER

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 Chauhan

5/30/2011

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

ASKER CERTIFIED SOLUTION

Brijesh Chauhan

5/30/2011

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Ian White

6/3/2011

ASKER

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

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Ian White

6/17/2011

ASKER

Thanks that worked fine