GoogleMAPの切り替えについて
Javascriptのエラーについて質問させてください。
１つのページで、２種類のGoogleMAPを切り替えたいと思っています。しかし、以下のように記述したところ「"offsetwidth"はnullまたはオブジェクトではありません。」とエラー表示されてしまいます（確認ブラウザ：IE6、FireFOX3、Safari、Googlechorome）。
一体、何がマズイのかさっぱりわからなくなり、困り果てて質問しています。どうかお力をお貸しください。
宜しくお願いします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style_sheet.css" type="text/css">
<title>マップテスト</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=グーグルマップAPIキー" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
//エリア１マップ用設定開始。
var map = new GMap2(document.getElementById("map"));
//コントロール追加表示。右下縮小図とコントロールバー。
map.addControl( new GSmallMapControl() );
map.addControl( new GOverviewMapControl() );
//店舗のマーカー表示
var point1 = new GLatLng(座標,座標);
map.setCenter(point1, 10);
var point2 = new GLatLng(座標,座標);
map.setCenter(point2, 10);
var point3 = new GLatLng(座標,座標);
map.setCenter(point3, 10);
//アイコンのための宣言
var icon = new GIcon();
// アイコン画像のURL
icon.image = "./img/hoge.png";
// アイコン画像のサイズ
icon.iconSize = new GSize(50, 25);
// アイコンの表示場所
con.iconAnchor = new GLatLng(32, 0);
// マーカーの表示
map.addOverlay( new GMarker(point1, icon) );
map.addOverlay( new GMarker(point2, icon) );
map.addOverlay( new GMarker(point3, icon) );
//デフォルトの表示
map.setCenter(new GLatLng(座標,座標), 10);
} }
function load2() {
if (GBrowserIsCompatible()) {
//エリア２マップ用設定開始。
var map2 = new GMap2(document.getElementById("map"));
//コントロール追加表示。右下縮小図とコントロールバー。
map2.addControl( new GSmallMapControl() );
map2.addControl( new GOverviewMapControl() );
//店舗のマーカー表示
var point21 = new GLatLng(座標,座標);
map2.setCenter(point21, 10);
var point22 = new GLatLng(座標,座標);
map2.setCenter(point22, 10);
var point23 = new GLatLng(座標,座標);
map2.setCenter(point23, 10);
var point24 = new GLatLng(座標,座標);
map2.setCenter(point24, 10);
//アイコンのための宣言
var icon2 = new GIcon();
// アイコン画像のURL
icon2.image = "./img/hoge2.png";
// アイコン画像のサイズ（横幅/縦幅）
icon2.iconSize = new GSize(50, 25);
// アイコンの表示場所
icon2.iconAnchor = new GLatLng(32, 0);
// マーカーの表示
map2.addOverlay( new GMarker(point21, icon2) );
map2.addOverlay( new GMarker(point22, icon2) );
map2.addOverlay( new GMarker(point23, icon2) );
map2.addOverlay( new GMarker(point24, icon2) );
//デフォルトの表示
map2.setCenter(new GLatLng(座標,座標); 12);
} }
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<a href="#" onclick="load()">エリア１</a>｜
<a href="#" onclick="load2()">エリア２</a>｜
<!-- マップ表示用DIV -->
<div id="map" style="width:700px;height:350px;"></div>
</body>
</html>
お礼
ありがとうございます。 サンプルはJavaScript？ですよね。 AJAXで質問したのがあれかもしれませんが、モバイル用のGoogle Static Mapsを利用したいので、jsなしの環境を想定しています。 プログラム言語はPHPです。 よろしくお願いします。