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>
お礼
とっても分かりやすいサイトをご紹介下さりありがとうございました！参考になりました。みなさん、このようにして制作されている事がわかりました☆ googleのマイマップをサイトに埋め込んで表示してましたが、他に全く違った方法があるんですね。 マイマップでは、登録した住所をクリックして表示させた時に「ルート・乗換案内」が表示され、今回はこの機能が必要で、お教え頂いた方法では、こちらは付けられそうに無かったので、やはり、現状でいく事にしました。 よいサイトをお教え頂きありがとうございました☆