Hi,

I have a EventPage class extends the Page. when user creates or edit the event page, there is a google map on the right panel, user may fill in the Google Map Location, then click button 'Locate On Google Map' to set a marker on the google map, then they may adjust this marker's position accordingly, by doing so it will update the corresponding form field, 'Google Map Latitude', 'Google Map Longitude', which eventually will be store in the database. (please see attached image)

function getCMSFields() {

		$fields = parent::getCMSFields();
		Requirements::javascript("http://maps.google.com/maps?file=api&v=2&key=".GOOGLE_MAP_API_KEY);
		Requirements::javascript("mysite/javascript/google_map.js");
		
		if($this->GoogleMapLatitude != '' && $this->GoogleMapLongitude != ''){
			$tmp_zoom = '15';
			$tmp_lat = $this->GoogleMapLatitude;
			$tmp_lng = $this->GoogleMapLongitude;
		} else {
			$tmp_zoom = '3';
			$tmp_lat = '-23.725011735951796';
			$tmp_lng = '135.3515625';
		}
		
		Requirements::customScript(<<<JS
	//alert('hello world');	
		
 	if(map === undefined)
		var map = null;

	if(geocoder === undefined)
		var geocoder = null;

	if(marker === undefined)
		var marker = null;
								
	var currentZoomLevel = $tmp_zoom ;
	var currentLatitude = $tmp_lat;
    var currentLongitude = $tmp_lng;

	initializeGoogleMap(currentZoomLevel, currentLatitude, currentLongitude);
JS
);
		
		$fields->addFieldToTab('Root.Content.Main', new TextField('GoogleMapLocation', 'Google Map Location', '', 255), 'Content');
		$fields->addFieldToTab('Root.Content.Main', new LiteralField ("literalfield", '<input name="locate" id="locate" type="button" value=" Locate On Google Map " onclick="locateBusiness();" /><br><div id="google_map" style="width: 500px; height: 285px"></div><noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again. </noscript><br>'), 'Content');
		
		$fields->addFieldToTab('Root.Content.Main', new TextField('GoogleMapLatitude', 'Google Map Latitude', '', 255), 'Content');
		$fields->addFieldToTab('Root.Content.Main', new TextField('GoogleMapLongitude', 'Google Map Longitude', '', 255), 'Content');
                
                ...
                return $fields;
	}

'mysite/javascript/google_map.js' contains two function:
function initializeGoogleMap(zoom_level, lat, lng)
function locateBusiness(), tied to the custom button

if I am on a event page, and refresh the page, then the google map gets initialized and every other function works fine, however, if I click on another event page through left nav bar, the page loads without the google map. so I put in a alert('hello world'); in my custom js, this works on page reload, yet again by clicking on other event page, this alert box does not show, which is every strange, as if it does not exist.

I need this initializeGoogleMap() fire every time user click on the event page, yet it seems that click on the nav on the left handside, the event form is loaded by ajax, would this have something to do with my custom js not loading? if I inspect the code using firebug, the script is there on the page, just not firing. I don't want to tied this function to any click event, it should fire on loading the page.

I have spent solid two days on this, tried to add my custom js in number of ways, none of them solve the problem. the closest forum post I came cross is this: http://www.silverstripe.org/customising-the-cms/show/256687#post256687
It seems that he has the same problem as I do, unfortunately no answer.

Could someone please help!

Have a look at jQuery especially its Event functions you can bind to an elements 'load' event and they have a 'live' function that will 'bind' to any future elements when the DOM changes

I have tried to bind an action to the form's load event:

function getCMSFields() {

Requirements::customScript("
jQuery('#Form_EditForm').bind('load', function() {
alert('Form reloaded');
});
");
.
.
.

with no success. Which 'future elements' did you mean?

Only the window object has a load event:

http://www.w3schools.com/Html/html_eventattributes.asp