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

Maps JavaScript API

パソコンと携帯端末の両方で使える地図アプリケーションのためのソリューション

Google Maps JavaScript API v3

【書式】

http://maps.google.com/maps/api/staticmap?center=<緯度>,<軽度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦幅>&sensor=<ユーザーの位置情報取得センサーの使用の有無>

ルート検索マップ

ソースコード【 HTML 】

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

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

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

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- 【１】Google Maps APIを呼び出し-->
<script src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize(position) {

  // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(35.681382,139.766084);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 15,
    
    // ■地図の中心を指定（上記で設定の緯度経度latlng）
    center: latlng,
    
    // ■地図のタイプ設定
    // 　ROADMAP：デフォルト、SATELLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  //ルート検索
  var rendererOptions = 
  {
  draggable: true,
  preserveViewport:false
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  var directionsService = new google.maps.DirectionsService();
    var request =
    {
    origin: "東京",//出発点
    destination: "京都",//到着点
    travelMode: google.maps.DirectionsTravelMode.DRIVING,//運転モード
    unitSystem: google.maps.DirectionsUnitSystem.METRIC,
    optimizeWaypoints: true,
    avoidHighways: false,
    avoidTolls: false
    };
    directionsService.route(request, function(response, status)
    {
        if (status == google.maps.DirectionsStatus.OK)
        {
        directionsDisplay.setDirections(response);
        }
    });
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  //　ルート検索地図に表示する
  directionsDisplay.setMap(map);
  
}//initialize() 

</script>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.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>ルート検索マップ</h1>
</div><!-- ▲/ header -->

<div data-role="content">
<div data-role="fieldcontain">

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

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

</div><!-- ▲/ fieldcontain -->
</div><!-- ▲/ content -->

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

</body>
</html>

ブラウザで表示【 Safari 】

PAGE TOP