サンプルページ　　　Google Maps 20

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　Google Maps 20　　google_maps20.htm

左上のﾎﾞﾀﾝ”Gear”ﾎﾞﾀﾝで、ルート案内を、”Traffic”ﾎﾞﾀﾝで渋滞状況を表示。　　右上の、“目的地”をﾀｲﾌﾟｲﾝします！、“車両”のｸﾘｯｸで、“徒歩”を。　　　　　　Google Maps API、jQuery。　　　　　　ｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、左上のﾎﾞﾀﾝ”Gear”ﾎﾞﾀﾝで、ルート案内を、”Traffic”ﾎﾞﾀﾝで渋滞状況を表示。　　右上の、“目的地”をﾀｲﾌﾟｲﾝします！、“車両”のｸﾘｯｸで、“徒歩”を。

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、google_maps20/ をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、google_maps20.htm、001104040.js、001104040.css を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 変わってしまった、ﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、google_maps20.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名）の、 <head>　～　</head> の任意の行間に (*1)を、さらに <body>　～　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html を WordPad や SmipleTextなどのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　　下記の（例） (*1) と、(*2)、(*3) を参考に太字部分の編集を任意に行います。　　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 10.x～などで開いて。　　　　更新の確認は、[F5]ｷｰを押し、最新ﾃﾞｰﾀ読み込み、で。　　　　あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄｵﾌﾟｼｮﾝ] - [閲覧の履歴] - [削除] などでも。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.js、*.css なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わってしまったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

(*1) ：　google_maps20.htm （例）　　　　　　　　　挿入先の　<head> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕　

ｼﾌﾄJIS使用（削除不可）

ieなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

Google Maps API
jQuery

出発起点（緯度・経度）

ｽﾞｰﾑ

<title>サンプルページ　　Google Maps 20</title>

<LINK href="001104040.css" rel="stylesheet" type="text/css">
<STYLE type="text/css">
html {height: 100%;}
body {text-align: left; height: 100%; margin: 0; padding: 0; background: #F9F8F9 url('../wttec.gif'); font-size: 12px; font-family: Arial,メイリオ,MS PGothic;}
#mapapie {width: 100%; height: auto; position: absolute; top: 0; right:0; bottom: 0; left:0;}
#inicio {position: absolute; top: 0; left: 4px; overflow: hidden; z-index: 999999;}
#popupPanel-popup {right: 0 !important; left: auto !important;}
#popupPanel {width: 240px; background: rgba(0,0,0,.5); margin: none; padding: 5px 3px; overflow: auto;}
#directions-panel {font-size: small; background-color: #eaeaea; overflow: auto;}
</STYLE>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<SCRIPT src="001104040.js" type="text/javascript"></SCRIPT>
<SCRIPT type="text/javascript">
var map, marker, initialLocation, watchID;
var traffic = new google.maps.TrafficLayer();
var flag = false;
var latLng = new google.maps.LatLng(35.68476868,139.75120067);
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var directionsVisible = false;
var gpmarker;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var opts_map = {
zoom: 14,

==== この間､説明を省略｡ ====

window.onpagehide = function() {
navigator.geolocation.clearWatch(watchID);
};
google.maps.event.addDomListener(window, "load", initialize);
</SCRIPT>

</head

(*2) ：　google_maps20.htm （例）　　　　　　　　挿入先の　<body> ～ </body>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

<body>

<DIV id="paginapie" data-role="page" data-theme="b">
<DIV data-role="content">
<DIV id="mapapie"></DIV>
<DIV id="inicio"><A href="#popupPanel" data-role="button" data-iconpos="notext" data-icon="gear" data-position-to="window" data-transition="slide" data-rel="popup">Gear</A>
<LABEL class="ui-hidden-accessible" for="button">Traffic:</LABEL>
<INPUT name="button" id="button" onclick="toggle();" type="button" value="Traffic" data-iconpos="notext" data-icon="info">
</DIV>
<DIV id="popupPanel" data-role="popup" data-theme="none" data-tolerance="0,0" data-shadow="false" data-corners="false">
<LABEL class="ui-hidden-accessible" for="dir-mode">Mode:</LABEL>
<SELECT name="dir-mode" id="dir-mode" onchange="calcRoute()" data-mini="true">
<OPTION value="DRIVING">車両</OPTION>
<OPTION value="WALKING">徒歩</OPTION>
</SELECT> 
<LABEL class="ui-hidden-accessible" for="end">Start:</LABEL>
<INPUT name="end" id="end" onsubmit="calcRoute()" type="search" placeholder="目的地" value="" data-mini="true"> 
<LABEL class="ui-hidden-accessible" for="inicio">Inicio:</LABEL>
<INPUT name="inicio" id="inicio" onclick="inicio();" type="button" value="Clear" data-icon="delete" data-mini="true">
<DIV id="directions-panel">
</DIV></DIV></DIV></DIV>
<SCRIPT type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37216234-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</SCRIPT>

==== この間自由ｺﾝﾃﾝﾂを記述､説明を省略｡ ====

< 補足 >　　　　適時参照あれ！。

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。