Display alert null not an object in IE 8

[Yohanes]

Hello there,

i have google maps in my website.

this is the link http://svn.rectmedia.com/webrepo/p25cruffs/website

and also this is my javascript.

/**
* Called on the initial page load.
*/
function init() {
var mapCenter = new google.maps.LatLng(51.031618,-114.071378);
var map = new
google.maps.Map(document.getElementById('map_canvas'), {
'zoom': 18,
'center': mapCenter,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});

// Create a draggable marker which will later on be binded to
a
// Circle overlay.
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.031618,-114.071378),
draggable: true,
title: 'Drag me!'
});

/*// Add a Circle overlay to the map.
var circle = new google.maps.Circle({
map: map,
radius: 50 // 3000 km
});*/

// Since Circle and Marker both extend MVCObject, you can bind
them
// together using MVCObject's bindTo() method. Here, we're
binding
// the Circle's center to the Marker's position.
// http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
//circle.bindTo('center', marker, 'position');
}

// Register an event listener to fire when the page finishes
loading
google.maps.event.addDomListener(window, 'load', init);

If i open the page contact us, it does not matter. The Alert does not
show. But when i open the homepage, the error alert show up.

How to solve this? I don't know to solve that problem.

Thank you

[BruceB]

You're loading the Javascript API on the home page of your web site (http://svn.rectmedia.com/webrepo/p25cruffs/website/), and initializing a map object with a DOM Node ("map_canvas") that isn't present or available on your home page:

var map = new google.maps.Map(document.getElementById('map_canvas'), {

'zoom': 18,

'center': mapCenter,

'mapTypeId': google.maps.MapTypeId.ROADMAP

});

Using Chrome on the home page I see the "null" error in the Javascript console:  

1. Uncaught TypeError: Cannot read property 'offsetWidth' of null

The div element named "map_canvas" is only present when you go to your "Contact Us" page (http://svn.rectmedia.com/webrepo/p25cruffs/website/contact-us), which is why there's no error thrown on that page.

I would not recommend loading the API on the home page, since you're not showing a map there anyway.  It would count as a page view unnecessarily.

If your home page and contact page are sharing code, you could load the API dynamically (rather than statically) in an event handler that's initiated when the user views the contact page.

See http://code.google.com/apis/maps/documentation/premier/guide.html#CommonLoader (which also points you to http://code.google.com/apis/maps/documentation/javascript/v2/basics.html#AJAX_Loader) for an example of dynamic, on-demand loading of the API.  Your event handler that would be triggered by viewing the contact page would call "google.load('maps', '3.5', ...)", and set a callback function for when it's loaded using "google.setOnLoadCallBack(fn)" where the callback function is basically what you have as your initialize function.

Or a more simple approach at http://code.google.com/apis/maps/documentation/javascript/basics.html#Async, where you would call "loadScript()" when you're ready to show a map (again with a callback for when it's loaded).