noteMap 三連休最終日に鎌倉登山⑭-3

初めに

前回の投稿では、地図をクリックすると地点情報が表示される画面でした。
次に複数地点を登録する方法を考え始めたが、この方法はうまくない。
画面の端に各地点の情報を表示する方式も考えてみようと思い立ちました。
今回は複数地点登録機能の開発の試行錯誤の様子の紹介です。
機能開発の途中までしか書いてありません。
当該機能の最終形はこの記事を書き終わってから開発することになります。

私の開発方式は、完全な完成形の設計書を作り、それに基づいてシステムを作る方式ではありません。
作りながら、次はどうしようと考える方式です。
全体は未完成でも、完成部分を使いながら考えた方が、具体的な良い考えが浮かぶように思います。

現在の画面の問題点

現在の方式は１地点を登録する場合の地図です。
複数地点を登録する場合は各地点の情報を一覧で見える必要があります。
即ち、このように地点が増えていく方式が良さそうです。
この画面が試作品です。

試作品の改良

試作品を作るといくつかの問題点が見えてきます。
これらをひとつずつ手直ししていくと最終形が見えてきます。
具体的に一つずつ開発していきましょう。

従来画面のコードはどうする

従来画面のコードnoteMapType0.phpをコピーしてnoteMapNew.phpと名前を変え、開発することにします。
noteMapType0.phpはそのまま残します。
後で必要になったら使うかもしれません。
多分、不用品になるかと思います。

初期画面はどうする

まだ情報は何もないのだからGoogle地図のままでいいんじゃない？
地図を初めてクリックしたら１つだけの地点一覧が現れるのです。
地点情報の初期のhtmlコードはこのようになります。
Style属性にはdisplay:noneを指定してあるので何も表示されません。

<div id="style-selector-control" class="map-control" style="position:absolute; top: 93px; left: 10px; z-index: 100; background-color: #ddf;">
<div id="content" style="width:250px; padding-left:5px; display:none">
<form method="post" action="https://nsk.org/maps/MapPost.php">
　・・・省略・・・
  <label id="addLocation"></label><br>
  <input type="submit" class="btn btn-primary btn-sm" style="text-align: center;" value="保存して終了">
</form>
</div>
</div>

ここで地図をクリックすると、最初に地点情報の表示属性をこのJavaScriptコード でdisplay:block;に変更します。

document.getElementById("content").style.display = "block";

地点の追加はどうする

GoogleMaps上でクリックするとその地点の経緯度が得られます。
さらに、経緯度をGeocoderに渡すと住所が得られます。
これらを地点情報表に追加する必要があります。
このコードでhtmlタグを作り、経緯度と住所(まだコードがありません)を入れ、<label Id="addLocation"/>タグの要素の後ろに挿入します。

map.addListener("click", (mapsMouseEvent) => {
    // 経緯度の取得
    var latLng = mapsMouseEvent.latLng;
    var latitude = latLng.lat().toFixed(6);
    var longitude = latLng.lng().toFixed(6);

    // 新しい入力フィールドを追加
    LocationCount++;
    document.getElementById("content").style.display = "block";

    var locationDiv = document.getElementById('addLocation');
    var newLabel = document.createElement('label');
    newLabel.textContent = 'L' + LocationCount;

    var newLatInput = document.createElement('input');
    newLatInput.type = 'text';
    newLatInput.name = 'lat'+ LocationCount;
    newLatInput.style.width = '95px';
    newLatInput.style.textAlign = 'right';
    newLatInput.readOnly = true;
    newLatInput.value = latitude;

    var newLngInput = document.createElement('input');
    newLngInput.type = 'text';
    newLngInput.name = 'lng'+ LocationCount;
    newLngInput.style.width = '95px';
    newLngInput.style.textAlign = 'right';
    newLngInput.readOnly = true;
    newLngInput.value = longitude;

    locationDiv.appendChild(newLabel);
    locationDiv.appendChild(newLatInput);
    locationDiv.appendChild(document.createTextNode(' '));
    locationDiv.appendChild(newLngInput);
    locationDiv.appendChild(document.createElement('br'));

    map.panTo(latLng);

    const geocoder = new google.maps.Geocoder();
    geocoder.geocode( {'location': latLng},  function(results, status){
        if (status === 'OK' && results[0]){
            var address = results[0].formatted_address.replace('日本、','');
            const result = splitAddress(address);
            if (result) {
                var postcode = result.postalCode;
                val = document.getElementById('postcode');
                val.value = postcode;
                address = result.address;
                val = document.getElementById('address');
                val.value = address;
            }
        } else {
            alert("住所から位置の取得ができませんでした。: " + status);
            return;
        }
    });
});

その他の課題

試作品の画面をじっくり眺めていれば、次のような問題点に気づきます。

• 変なところで改行されて多くの地点を登録できず、デザインがよくない。　　　テーブルにするなどして、1地点の情報を長方形の枠に収める。

• 地点データを削除したい。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　最後のデータの削除だけを対応することにします。

• 地点データの順序を入れ替えたい。　　　　　　　　　　　　　　　　　　　

• 地点データを途中に挿入したい。　　　　　　　　　　　　　　　　　　　　　　　　「入れ替え」と「挿入」は複雑になるのでやめておきます。　　　　　　削除と追加で同等の機能が実現できるからです。　　　　　　　　　　　　なお、noteMapの利用者が増え、要望が多ければ対応を検討します。

• 地点の名称や注意事項を記入するコメント欄が欲しい。　　　　　　　　　　　　　地点データにコメント欄を追加し、Geocoderで取得した住所を書いておきます。また、書き換えを可能にします。

• 複数地点はルート始点・経由地・終点と見做してルートマップが欲しい。

• 各地点は紹介したい施設などであり、マーカーを表示して欲しい。　　　　　マーカーにはコメント欄の情報を表示して欲しい。

• 地点データはGoogleMaps以外のアプリで取得したものであり、地図はurlを表示して欲しい。

最後に

いろいろやるべきことが多く、複数地点サポートは完成までいかなかった。
これらの問題に対応すれば、noteMapの基本機能の完成となります。
基本機能の完成後は以下を考えています。

• 一覧表のWeb表示（地域別、種類別など）

• GoogleMaps以外の地図情報対応

• APIの提供

• 後継者の募集

参考１：GoogleMapsの来歴

Google Maps Platformはアクティブユーザーが1ヶ⽉間10億⼈と世界最大の地図プラットフォームです。
2005年から開発者向けにGoogle Maps APIがGoogle Maps 開発プラットフォームとして提供されています。
以前のサービスの名称はGoogle Maps APIでした。
2018.7.15にリニューアルされ現在のGoogle Maps Platformとなりました。

参考２：noteMapアイコン取得方法

1. Chreome ウェブストアを開きます。

2. 検索ボックスに「note Map」と入力してnoteMapを捜します。

3. [Chrome に追加] を選択します。

4. 右上のその他アイコン [拡張機能] [拡張機能を管理] を選択します。

5. ピンアイコンをクリックしてnote Mapアイコンを表示にします。

アドレスバーの右方にnote Mapアイコンが表示されます。

---

【人生最後のプロジェクト】
高齢者の妄想　ビットコインを自分で作ってみたが失敗
Coincheckのアカウント登録が拒否されました
これから始める 人生最後のプロジェクト①
人生最後のプロジェクト　note記事と地図を連携させたい②
noteMap構想　開発するときの頭の中③
noteMapサービス 中の人と外の人④
noteMap GoogleにChrome拡張を申請⑤
noteMap Googleから申請却下の返事⑥
noteMap Googleからまたもや申請却下⑦
noteMap Chrome Web Storeに登録された⑧
noteMap これからどうする⑨
noteMap どんな言語を使って開発する？⑩
noteMap 開発を始める前にGoogleアプリやサービス全体の理解⑪
noteMap 場所検索機能を追加する⑫
noteMap 登録した場所を表示する⑬
noteMap 三連休最終日に鎌倉登山⑭-1
noteMap 三連休最終日に鎌倉登山⑭-2
noteMap 三連休最終日に鎌倉登山⑭-3（本記事）