jQueryMobile Maps JavaScript API０４

スマートフォン 授業



ルート検索


  • 任意の場所を指定してルートを検索する
  • ルートタイプ(車)での設定



ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Maps ルート検索</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">

<style>
.ui-content .h1{
color:#5E87B0;
font-size:17px;
text-shadow:1px 0 0 #FFF;
}

/* text-overflowを初期化するスタイルを定義 */
.wordbreak{
overflow: visible;
white-space: normal;
}

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

/*入力フォームの背景を調整*/
textarea.ui-body-b,input.ui-body-b{
  background-color:white;
}
/*見出しとフォーム部品の間の余白を調整*/
.ui-field-contain:first-child{
padding-top:0;
}
</style>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/mapdrow.js"></script>

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body onload="initialize()">

<div data-role="page" data-add-back-brn="true" data-back-btn-text="戻る">

<div data-role="header" data-position="inline">
<h1 .wordbreak>Google Maps ルート検索</h1>
</div><!-- ▲/ header -->

<div data-role="content">
<h2 class="h1">アクセス</h2>
<p>テキストフィールドに始点と終点を入力すると、ルート検索を行います。</p>
<p>

<div data-role="fieldcontain">
<label for="name">始点：</label>
<input type="text" name="start" id="start">
<label for="name">終点：</label>
<input type="text" name="end" id="end">
</div>

<p>
<input type="button" value="検索" onclick="searchRoute()" />
</p>
<div id="map_canvas" class="ui-shadow"></div>
</div><!-- ▲/ content -->

<div data-role="footer" data-position="fixed">
<h4>フッター</h4>
</div><!-- ▲/ footer -->
</div><!-- ▲/ pega -->

</body>
</html>

ブラウザで表示【 Safari 】

  • 任意の場所を指定してルートを検索する
  • ルートタイプ(車)での設定