ウェブ学のすすめ

Study of Web Design & Programing

jQueryMobileのサイトにGoogle マップを設置する

jQueryMobile

プレビュー

↓別ウィンドウを開いて見る
【jQueryMobile】Google マップの表示

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格：無料

ポイント

jQueryMobileで作られたサイトにGoogle Mapを表示させるには通常のスクリプトの他に

$('マップを表示するcontentのid名').live('pageshow',function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter('座標');
});

を追加します。

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>【jQueryMobile】Google マップの表示</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div data-role="page" id="map">
<div data-role="header">
<h1>Google マップの表示</h1>
</div>
<div data-role="content" id="map_content">
<div id="map_canvas"></div>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton</h4>
</div>
</div>
</body>
</html>

CSS

#map_canvas {
    width:100%;
    height:400px;
    border:4px solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

$(function() {
    var latlng = new google.maps.LatLng(35.69167,139.700211);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position:latlng,
        map: map
    });
    $('#map_content').live('pageshow',function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter(Latlng);
    });
});