hello all,

this is my 1st app that will run on an apache server and it is based on google maps. the problem is that while i can open the .html file (together with a bit of javascript code) and see it running …
i cannot do that when i have a .perl-cgi script instead of the .html file.
i use the default apache server install on mac os x, the root directory i use for the .chi script is the default one "/Library/WebServer/CGI-Executables" (please note that the Hello World chi script works just fine).
so when i type "http://localhost/cgi-bin/demo.cgi" i am getting the following:
Failed to load resource: the server responded with a status of 404 (Not Found) ---> demo.js
Failed to load resource: the server responded with a status of 404 (Not Found) ---> favicon.ico
and the "/var/log/apache2/error_log" complains only for the favicon thing.

attached is the simple app i am using, so if you could tell me if you are able to run it and how you did it, it would very informative.
i am in a desperate need to make this work, so i would appreciate your help.

thank you.

Code:
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<style type="text/css">
	  	html 	{ height: 100% }
	  	body 	{ height: 100%; margin: 0px; padding: 0px }
		label	{ font-size:9px; text-align:center; color:#222; text-shadow:0 0 5px #fff; font-family:Helvetica, Arial, sans-serif; }
		#map_canvas { height: 100% }
	</style>
	<title>demo</title>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="/Library/WebServer/CGI-Executables/demo.js"></script>
</head>
<body>
	<div id="map_canvas"></div>
</body>
</html>
Code:
#!/usr/bin/perl -wT

use		strict ;
use		warnings ;
use		CGI ;
use		CGI::Ajax ;


print "Content-type: text/html \n\n" ;
my	$html = <<HTML ;
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<style type="text/css">
	  	html 	{ height: 100% }
	  	body 	{ height: 100%; margin: 0px; padding: 0px }
		label	{ font-size:9px; text-align:center; color:#222; text-shadow:0 0 5px #fff; font-family:Helvetica, Arial, sans-serif; }
		#map_canvas { height: 100% }
	</style>
	<title>demo</title>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
	<div id="map_canvas"></div>
</body>
</html>

HTML
print	$html ;
Code:
(
	function() 
	{  
		var	infowindow ;

		window.onload = function() 
		{
			/* Google Maps options set. */
			var options = 
			{  
				zoom 						: 12,
				center	 					: new google.maps.LatLng(37.99466403683962, 23.771860599517822),
				mapTypeControlOptions		: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, "minimal"] },
				disableDefaultUI 			: true,
				mapTypeControl				: false,
				navigationControl 			: true,
				navigationControlOptions 	: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
				scaleControl 				: false,
				keyboardShortcuts 			: false,
				disableDoubleClickZoom		: false,
				draggable					: true,
				scrollwheel					: false,
				streetViewControl			: false,
				noClear						: false,
				backgroundColor				: "#FFFFFF"
				} ;
				/* Add transparency to the map. */
				var stylez = [{featureType: "all", elementType: "all", stylers: [{lightness: 50}]}] ;
				var map = new google.maps.Map(document.getElementById("map_canvas"), options) ;
				var styledMapOptions = { name: "minimal" } ;
				var minimalMapType = new google.maps.StyledMapType(stylez, styledMapOptions) ;
				map.mapTypes.set("minimal", minimalMapType) ;
				map.setMapTypeId("minimal") ;
			} ;
		}
)() ;