jQuery MobileでGoogleMap

Yuuです。

前回に引き続き、jQuery Mobileです。 今回はGoogle Mapsを表示してみようと思います。

やりたいことは以下の項目。

  • 指定した経度・緯度の場所を表示する。
  • マーカーを表示させる。

静的なページ

まずは、静的なページで表示してみる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <title>Google Maps</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    #gmap { width:320px;height:320px; }
  </style>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() {
      var latlng = new google.maps.LatLng(35.710635, 139.792692);
      var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("gmap"),myOptions);

      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title:"かみなりもん"
      });
    };
  </script>
</head>
<body onload="initialize()">
  <div id="gmap"></div>
</body>
</html>

デモページ

jQuery Mobile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <title>Google Maps</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    #gmap { width:320px;height:320px; }
  </style>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() {
      var latlng = new google.maps.LatLng(35.710635, 139.792692);
      var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("gmap"),myOptions);

      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title:"かみなりもん"
      });
    };
  </script>
</head>
<body onload="initialize()">

<div data-role="page">

  <div data-role="header">
    <h1>Google Maps</h1>
  </div>

  <div data-role="content">
    <div id="gmap"></div>
  </div>

  <div data-role="footer">
    <h4>Copyright©Code Life.net</h4>
  </div>

</div>

</body>
</html>

デモページ

地図の大きさを100%指定にしてみる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <title>Google Maps</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    #gmap { width:100%;height:100%; }
  </style>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() {
      var latlng = new google.maps.LatLng(35.710635, 139.792692);
      var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("gmap"),myOptions);

      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title:"かみなりもん"
      });

      var pageHeight = $(document).height();
      $("#gmap").css("height",pageHeight);
    };
  </script>
</head>
<body onload="initialize()">

<div data-role="page">

  <div data-role="header">
    <h1>Google Maps</h1>
  </div>

  <div data-role="content">
    <div id="gmap"></div>
  </div>

  <div data-role="footer">
    <h4>Copyright©Code Life.net</h4>
  </div>

</div>

</body>
</html>

デモページ

1
2
3
<style type="text/css">
  #gmap { width:100%;height:100%; }
</style>

CSSを100%に変更

1
2
var pageHeight= $(document).height();
$("#gmap").css("height",pageHeight);

CSSでgmap要素を100%指定すると消えてしまったので、Javascriptでドキュメントの高さをgmapに設定

地図の大きさを100%でページ分割する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <title>Google Maps</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    #gmap { width:100%;height:100%; }
  </style>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>

<div data-role="page" id="index">

  <div data-role="header">
    <h1>Google Maps</h1>
  </div>

  <div data-role="content">
    <a href="#access" data-role="button">地図を表示する</a>
  </div>

  <div data-role="footer">
    <h4>Copyright©Code Life.net</h4>
  </div>

</div>

<div data-role="page" id="access">

  <div data-role="header">
    <h1>Google Maps</h1>
  </div>

  <div data-role="content">
    <div id="gmap"></div>
    <script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(35.710635, 139.792692);
        var myOptions = {
          zoom: 15,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("gmap"),myOptions);

        var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          title:"かみなりもん"
        });

        var pageHeight = $(document).height();
        $("#gmap").css("height",pageHeight);
      };
      $('#access').bind('pageshow',initialize);
    </script>

  </div>

  <div data-role="footer">
    <h4>Copyright©Code Life.net</h4>
  </div>

</div>

</body>
</html>

デモページ

1
2
3
<body onload="initialize()">
<body>

スクリプトが全ページで実行されてしまうので、onloadの指定をやめました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(35.710635, 139.792692);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"),myOptions);

    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"かみなりもん"
    });

    var pageHeight = $(document).height();
    $("#gmap").css("height",pageHeight);
  };
  $('#access').bind('pageshow',initialize);
</script>

script要素をhtmlコードのgmap下に移動。 pageshowイベントを使用して、accessページのみ実行するように指定しています。

この辺は、こちらのサイトを参考にさせて頂きました。 http://www.matsuaz.com/4_1/2011/06/18/1308334179361.html

ちなみに

1
2
3
$('#access').bind('pageshow',initialize);

$('#access').live('pageshow',initialize);

動的要素なので、bindをliveにすればHead内でも実行できました。

Comments