jQueryMobile Maps JavaScript API０３ - 実践するWEBサイト制作

出発点から目的地点までのルートマップ（任意の設定）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!--iPhone用フルスクリーン表示設定-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Maps API SDK</title>

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

<style>
/* 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;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
  var map;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService();
  function initialize() {
    var myOptions = {
      center:new google.maps.LatLng(35.7242235, 139.7153773),
      zoom: 10,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map); 
    calcRoute();
  }
   
  var end = new google.maps.LatLng(35.683061,139.702042);
  function calcRoute() {
      var request = {
      origin: "新宿",
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.WALKING,
      optimizeWaypoints: true,
      };
      directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
      });
  }
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

  <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>ルート検索マップ（詳細）</h1>
</div><!-- ▲/ header -->

<div data-role="content">
<h2 class="h1">アクセス</h2>

<!-- 地図はここに描画される -->
<div id="map_canvas" class="ui-shadow">

</div><!-- ▲/ map -->

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

</body>
</html>
ブラウザで表示【 Safari 】
PAGE TOP