グーグル マップ の マイ マップ の機能を補う積もりなのですが、 HTML のコード追加 は、敷居が高い と仰られる方もおいででしょう。
実際、自分で、書き換えていても、ミスりそうですし ... 。
そこで、コードブロックを自動生成させるべく、一部、手直しを入れました。
これで、半自動 位にはなるのでは。
HTML がお分かりになる方の為に。 少し、説明。
前回のコードは、マップ利用に重きを置いた為、自分のデータ挿入部分は全くの手作業でした。
HTML のコードを読めて書ける方には問題なくても、 やはり、ブロックを自動生成させた方が 便利ですよね。
そう、丁度、 Blog のパーツを組み込む様な感じで。
そこで、コードブロックを生成する機能を付加しました。
但し、コードの量も増える為、お詳しくない方には、更に、複雑で間違いを誘発する恐れもあります。
そこで、HTML ファイルそのものを幾つかに分割 し、
初期値を変える必要があるもの、
データとして蓄積（所謂、運用）して行くもの、
通常は弄らなくて済むもの、
そして、呼び出し元の、
４つのファイルからなる構成に変更しました。
使った方法は ｆrameset です。 フレームを分割するこの方法は HTML5 になって、非推奨になった様ですが。
iframe を使っても良かったのですが、ご勘弁下さい。 これで、書き出しちゃったので。
CSS を使って、見た目を弄る位のものを作るなら、iframe で書いた方がいいのですが。
さて、ファイル や コード の 説明です。
| ファイル名 | 概 要 | 表示 | HTML への書換 |
|---|---|---|---|
| GoogleMapLink.html *4. | 本体（トップ） | 全体 | 不要 |
| GoogleMapLink1.html | 出発地 | 上段 | あなたの街 を初期設定 |
| GoogleMapLink2.html | リンク リスト | 中段 | マップ登録データ ( HTML ブロック ) を挿入 |
| GoogleMapLink3.html | マップ登録データ生成 | 下段 | 不要 |
GoogleMapLink.html *4.
<!DOCTYPE html>
<html lang="jp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Google Map Link List ver 0.99.5</title>
</head>
<frameset rows="60,*,200">
<frame src="GoogleMapLink1.html" name="top">
<frame src="GoogleMapLink2.html" name="middle">
<frame src="GoogleMapLink3.html" name="botom">
</frameset>
<body>
Google Map リンク リスト ver0.99.5
</body>
</html>
GoogleMapLink1.html
<!DOCTYPE html>
<html lang="jp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Google Map Link Start Point</title>
</head>
<body bgcolor="#d0f8bb">
出発地： Google Map マップ リスト ver 0.99.5
<FORM>
<INPUT type="text" value="
あなたの街
" name="startPoint">
</FORM>
</body>
</html>
GoogleMapLink2.html
<!DOCTYPE html>
<html lang="jp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Google Map Link List</title>
</head>
<body bgcolor="#d0f8bb">
<!-- 連番自動 -->
<style>
table.basic {
counter-reset: seq_no; /* 表毎に */
}
table.basic tbody th:before {
counter-increment: seq_no; /* th 要素でカウント */
content: "登録 " counter(seq_no) " 番 "; /* 表示形式 */
}
table.basic { line-height: 0.5em; }
</style>
<table border="0" class="basic">
<tbody>
<!--
<tr>
<th></th>
<td><a href="
" target="_blank">
</a></td>
<td>
</td>
</tr>
-->
<!-- 注記：
生成ボタンで上記のコードに表示名・URL・備考を挿入したコードを自動生成。
下の この上に追加登録 行の直前に、そのブロック毎、挿入して登録。
-->
<!-- ここから 登録 -->
<tr>
<th></th>
<td><a href="
https://www.google.co.jp/maps/@35.673343,139.710388,11z?hl=ja
" target="_blank">
<p><font color="#008000">
マップ標準（東京）
</p>
</a></td>
<td>
新規用
</td>
</tr>
<!-- この上に追加登録 -->
</tbody>
</table>
</ body>
</html>
GoogleMapLink3.html
<!DOCTYPE html>
<html lang="jp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Google Map Link Generate HTML</title>
</head>
<body bgcolor="#d0f8bb">
表示名：
<FORM name="reg1">
<INPUT type="text" value="" name="endPoint" size="30">
</FORM>
URL：
<FORM name="reg2">
<INPUT type="text" value="" name="URL" size="90">
</FORM>
備考：
<FORM name="reg3">
<INPUT type="text" value="" name="notice" size="90">
</FORM>
<br />
<INPUT type="button" value="生成" onclick="makeBlock()">
<br />
<script language="javascript">
function makeBlock(){
myform.myarea.value="\t\t<tr>\n\t\t<th></th>\n\t\t<td><a href=\"\n"+document.reg2.URL.value+"\n\t\t\" target=\"_blank\">\n"+document.reg1.endPoint.value+"\n\t\t</a></td>\n\t\t<td>\n"+document.reg3.notice.value+"\n\t\t</td>\n\t\t</tr>\n\n"
}
</script>
<FORM name="myform">
<TEXTAREA onfocus="this.select()" rows="3" cols="68" name="myarea" readonly>
</TEXTAREA>
</FORM>
</ body>
</html>
コード ダウンロード。 圧縮ファイル (ZIP) です。 こちら から どうぞ。 > GoogleMapList.zip Download
使い方
コードをダウンロード/展開 もしくは ファイル作成*3. したら、 注： 文字コード：UTF-8 ファイル種類：全て （ 拡張子：.html ）
GoogleMapLink1.html のコードで 赤く 表示された部分を書換*2.保存して下さい。 あなたの街 を初期設定。 マップで言う所の 自宅。.
この状態で、 GoogleMapLink.html をブラウザに表示させて下さい。 ファイルのダブルクリック または ブラウザへのドロップ。.
中段 にひとつ既にデータが入っています。 リンクから別タブでマップが開きます。
これが、マップの初期状態です。
ルート を選び 出発点には 上段 の 出発地の 文字 をコピー*1.して下さい。
目的地を入れ ルート条件等を決めたら、
マップの保存（後で参照する為のデータの保存） をします。
下段 で 、表示名（目的地）、URL、備考（日程や注釈や備忘録）を記入して、 生成 ボタンを押すと、
その下に HTML コードが自動生成されます。 備考以外の記入はコピー*1.やペーストを活用。.
その中の文字部分をクリックすると全選択状態になりますので、 コピー*1.して下さい。
編集*2.・貼り付け先は、 GoogleMapLink2.html のコードで、<!-- この上に追加登録 --> と書かれた行の直前 です。
これを上書き保存すれば､次回からは、そのマップをリンクから呼び出せます。
尚、ブラウザ上で、各段の境界部分をドラッグすれば、その高さを任意に調整出来ます。
 |
| この Web ページはスクリプトや ... 制限されています。 ... を許可(A) して下さい。 |
注：
*1.コピー 文字を選択状態にして、キーボードの Ctrl + C もしくは マウスの右クリックでコピー します。 .
*2.編集 メモ帳 などを開いておき、そこに、ドラッグ・ドロップして編集します。 通常の方法（ファイルをダブルクリック）では、ブラウザへの表示です。 .
*3.文字コード HTML 内で UTF-8 を指定していますので、必ず、UTF-8 でファイルを保存して下さい。 .
*4.ファイル名 GoogleMapLink.html は任意のファイル名へ変更が可能です。 但し、それ以外は、SRC 属性で指定しているので単純な変更は不可です。 .
*5.ファイル構成 ４つのファイルは同一フォルダに配置して下さい。 尚、同一フォルダ内に別ファイルがあっても問題ありません。 ( 例：バックアップ ) .
*6.ファイル予備 GoogleMapLink2.html はデータの蓄積先です。 不測の事態に備えてバックアップを用意されるのをお勧めします。 編集前に別名保存とかで。 .
*7.画面設計 GoogleMapLink.html は画面設計の大元です。 PC を前提で書いていますが、少しの手直しで、他のデバイスでも使えると思います。 HTML ですから。 .
前と比べ、少しは、使い易くなったでしょうか？。
[2015/05/16] 表示名 を 表示名（目的地）に変更。 備考以外の～ 注釈を挿入。
0 件のコメント:
コメントを投稿