My code works fine, but I wanted to clean up the code by putting the entire Javascript in an another file like maps.js. But the line with maps.js is not recognised. Using Firebug, I tried to debug and found out that the GET is failing for this file!
However the GET works for socket.io.js. I am running the system using node.js through localhost:8080. Can anyone tell me what I am doing wrong here? Or where is actually the current working directory when the HTML code is being executed? I even tried the absolute path of maps.js, but didn't have any success.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta type="keywords" content="" />
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<title>ReSense Client</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/js/maps.js"></script>
<script type="text/javascript">
var socket = io.connect('http://localhost');
var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
</body>
</html>
My best guess without seeing some of the node.js routes is that you're having an issue with the way you're serving static files with Node.js. Make sure your JS is inside a directory that you're serving as a static directory. If you're using express, it's like this:
app.configure(function(){
app.use(express.static("path/to/public"));
});
and just make sure the "public" directory is wherever you're serving static files.
The problem is that you might used default example on server side. In comparission to PHP + Apache solution, node.js is kind of "apache" in it self, and by default it wont server files like Apache does when you just have direct url to them.
This have to be manually coded in node.js.
You might write down route with access to such file that will serve it. This is good article to have a look how to serve static files. http://www.sitepoint.com/serving-static-files-with-node-js/
As well there is another option, is to use Express.js framework, that helps with routing, and as Dan Crews wrote below use extra configuration that will force node.js so serve files statically if there is no route were processed by developer.
app.configure(function(){
app.use(express.static("path/to/public"));
});
Remember that node.js does not do things that you expect from other web platforms like nginx or apache. So you have to take care about them yourself.