【jquery】カルーセルメニュー的なの | Home | 話してきました
2011/06/18 3:09 | 印刷

タイトルまんまのネタです。
実は、これちょっとはまったので、その辺も含めてはい。

jquery mobileについては以前も何回か触れていますが、ページの構成単位が
1.単一ファイル内に<div data-role="page"></div>で定義
2.htmlファイルごとに定義
という2パターンがあります。

2の場合、<head></head>内にgooglemapを表示する記述をしてもうまくいきません。

DEMO01

というのも、jquery mobileでは、デフォルトではページを読み込む時、ajaxで、<div data-role="page"></div>を書き換えているので、<head></head>は、最初に読み込んだファイルに依存します。
(ただし、jquery mobileのファイルは各ファイルに記述する必要がありますが)

というわけで、<div data-role="page">直下にgoogle mapsに関する記述を書けば表示されます。

DEMO02

これでもいいんですが、もう少しスマートに
jquery mobileのpageshowというイベントを使ってみました。

$('#mapLoad').bind('pageshow',mapを表示するための記述);

<div data-role="page" id="mapLoad"></div>が表示されたらという意味になります。
このイベントの定義の仕方は、かなり使えますね!

最後に、googlemapsの100%表示の仕方。
本来ならばcssで

body,html {
width:100%;
height:100%;
}

とかすればいいのですが、jquery mobileの場合、うまくいきません。どうも高さがうまく解釈されていないからだと思います。
なので

	var pageHeight = $(document).height();
	$("#map").css("height",pageHeight);

documentの高さを調べて、#map(地図を表示するブロック)の高さに代入しました。
これ、地図だけのページだったらこんな面倒な事しなくてもいいんですが、フッダーにメニューを入れたい場合はこのようにしないとうまくいかないようです。

その辺もふまえたDEMOはこちらです。

DEMO03

code for google map

<div id="mapLoad" data-role="page">
<div id="map" data-role="content"></div>
<script type="text/javascript">
function mapCanvas() {
	var latlng = new google.maps.LatLng(36.230672,137.963916);
	var myOptions = {
			zoom: 15,
			center: latlng,
			mapTypeControl: false,
			navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
			mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map"), myOptions);

	var pageHeight = $(document).height();
	$("#map").css("height",pageHeight);

}

$('#mapLoad').bind('pageshow',mapCanvas);
</script>
<!-- #mapLoad END --></div>

ちょっと分かりにくいサンプルでしたが、jquery mobileとgoogle mapはよく使う事になると思うので、参考までに。

Could you please publish the complete code of the DEMO03.
Dear LuisOsv
Thank you for your messege.
I edited code of the DEMO03 now.I am glad if it becomes helpful.
Thank you so much... I was searching a lot, how to get full size the google map.

こんばんは。
いつも参考にさせてもらってます。
が、今回は旨くいきません!

下記のページの「アクセス」なんですが、どうやっても地図が表示されません。
直接htmlを表示するときは、前のページへ「戻る」が出ず上手くいきますが、
トップから遷移するとどうしても表示されません。

何が悪いんでしょうか?
もしよかったら教えてもらえると助かります。

http://thai-chomchaba.com/

おはようございます。
メッセージ拝見しました。ちょっと調べないと分からないので、時間をもらえたらと思います。
お忙しいとは思いますが、よろしくお願いします!

コメント追加

タイトル
名前
E-mail
Webサイト
本文
情報保存 する  しない
  • 情報保存をすると次回からお名前等を入力する手間が省けます。
  • E-mailは公開されません - このエントリーの新規コメント通知が必要なら記入します。