PDA

View Full Version : TabPanel内にGoogle mapは表示できない？


heiyo
29 Sep 2009, 6:04 AM
Ext jsを使い始め、また１週間も経たない初心者です。
皆さんの知恵をかりたく、スレッドを立ち上げさせて頂きました。

手始めに、TabPanelを利用した簡単なページを作成してみたのですが、
早速、思うような動作が出来なく困っております。

http://i-sow.com/extjsdemo/gmapintabpanel.html

上記ＵＲＬへリンクすると、２つのタブがあるパネルを表示しまして、
１つめのタブには海の風景の写真を表示し、（ここはＯＫ）
２つめのタブには、Google mapを表示させたいのですが、
何かが悪いようで、空白のページが表示されてしまいます。

記述しているコードは次の通りです。

Ext.onReady(function() {
var objTab = new Ext.TabPanel({
width: 600,
height: 400,
activeTab: 0,
plain: true,
renderTo: 'tp',
items: [{
title: '写真',
html: '<img src="./img/sea1.jpg" id="pic">'
}, {
title: '地図',
autoLoad: 'gmap.html'
}
]
});
});

２つ目のタブにはautoLoadで、gmap.htmlを読み込むようにしているのですが、
このgmap.htmlがtabPanelでは正常に表示できないようなのです。

tabPanelを利用せずに、このgmap.htmlのＨＴＭＬページを表示させると、
次の通り、問題なくGoogle Mapのページが表示されます。

http://i-sow.com/extjsdemo/gmap.html

何でTabPanel上で、Google mapの表示が出来ないのか、
何かお気づきの方いましたら、ご教授のほど宜しくお願い致します。
yuki
30 Sep 2009, 12:01 AM
ポイントは2つあって：

1. autoLoadオプションの使い方
autoLoadはExt.Updater.updateメソッドと同じコンフィグオプションを渡すことができます。また、autoLoadで読み込むファイルの中のscriptタグを実行したい場合は、script:trueを指定してあげる必要があります。なので、今回の場合は、


autoLoad: {
url: 'gmap.html',
scripts:true
}

こんな感じで指定してあげればscriptタグが評価されます

2. Google Maps APIの読み込み
Google Maps APIの読み込みには結構な時間がかかるので、コールバックをうまく使ってあげないとAPIの読み込みのタイミングとコードの実行タイミングが合わずに地図がうまく表示されませんので、API Loaderを使ってあげる必要があります（gmap.html）：


<html>
<head>
<title>地図</title>
<script type="text/javascript"><!--
function loadmap(){
google.load("maps", "2",{ callback: function(){
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(40.686805, 141.431358), 12);
}});
}
--></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=[API_Key]&callback=loadmap"></script>
</head>
<body>
<div id="map" style="width:580px;height:380px;"></div>
</body>
</html>

Google API Loader読み込み→Google Maps API読み込み→地図描画という順番でコールバックを繋いでます。
heiyo
30 Sep 2009, 5:54 AM
yuki様
このたびはアドバイス、ありがとうございます。
勉強させて頂きました。

指摘のありました２箇所のポイントを反映してFireFox3.0で確認したところ、正常にGoogle Mapが
表示されるのを確認できました。ありがとうございました。

http://i-sow.com/extjsdemo/gmapintabpanel.html

ただ、WindowsのIE6、IE7、IE8で動作をさせたところ、ext-all.jsの7行目でエラーが発生してしました。

http://i-sow.com/temp/ie8error.GIF

このエラーについてはもう少し調べてみたいと思います。

もし、何かしらお気づきの点ありましたら、
恐縮ではありますがご教授の程、宜しくお願い致します。

とりあえず、FireFoxでの動作を確認できたことをご報告させて頂きました。