JQueryMobileでGoogleMapsAPIを使う

JQueryMobileでGoogleMapsを使う。

height指定しないと表示されなかったので（他にいい方法があるかもしれませんが）、メモ。

JavaScript(地図表示関数）

showMap = function() {
        map = new google.maps.Map($("#map_canvas")[0]);
    	var pageHeight = $(document).height();
	$("#map_canvas").css("height", pageHeight);
};

JavaScript（表示表示トリガ）

$('#page').bind('pageshow', showMap());

HTML

<div id="map_canvas"></div>

参考：ページ切替イベントとは

http://dev.screw-axis.com/doc/jquery_mobile/api/events/page_transition/about/