Initializing an openlayers map from an external Javascript file

Question

My aim is to load an OpenLayers map using an external JS file. In the head I have a jQuery library, and in the body I have the OpenLayers library, my Openlayers code and the div tag.

<script type="text/javascript" src="http://example.com/OpenLayers.js"></script>
<script type="text/javascript" src="http://example.com/MyMapScript.js"></script>
<div id="map"></div>

However I don't have access to the body tag so I can't fire onload="init()" which is how most of the examples work.

Instead, at the bottom of MyMapScript.js I've added the line below.

jQuery(window).load(init());

This is where it gets a little odd. Using Firebug I can see that this code is called and that it initializes the map object with all it's properties. I can also see that it is calling the WMS server and getting all the map tiles successfully. However it doesn't actually draw anything on the page and no extra divs are added to the HTML.

This page talks about a similar issue but I'm not sure how to apply it to my situation as for me init() is actually being called. http://bytes.com/topic/javascript/answers/855670-unusual-behavior-function-calls-java-script

The solution I've gone for in the end is to do this.

<script type="text/javascript" src="http://example.com/OpenLayers.js"></script>
<script type="text/javascript" src="http://example.com/MyMapScript.js"></script>
<script type="text/javascript"> window.onload=init; </script>
<div id="map"></div>

Which works but feels like a fudge.

Is there a way to initialize an OpenLayers map from an external javascript file? Is there anything wrong with my window.onload=init; solution? If I have to do it inline with the HTML is there are better way of doing it?

Answer 1

I fixed the issue myself. My initial code worked just fine apart from two things. I was missing the width and height on the div tag, and I had ordered the statements so that the div came after the javascript files, rather than before.

It should have looked like this.

<div id="map" style="width:400px; height:400px;"></div>    
<script type="text/javascript" src="http://example.com/OpenLayers.js"></script>
<script type="text/javascript" src="http://example.com/MyMapScript.js"></script>