noteMap 登録した場所を表示する⑬

初めに

地図系サービスの仕組みを知りたい、あるいは開発したい人を対象に、noteMapがどのような発想で、どのように作るかを紹介しています。

前回は、記事に関連した場所の地図の登録を行いました。
この種の地図を地点タイプ（タイプ１）と呼ぶことにします。
今回はこのタイプの地図の表示機能を完成させます。
地図が登録された記事でnoteMapアイコンをクリックした場合の処理です。

さらに、今後は地点タイプの地図の他に、どのようなタイプの地図を提供するかを考えます。

地図の表示機能の開発

データベースには、記事情報（記事Idと著者Id）とともに、地点情報（地図の種類と経緯度や住所など）が登録されています。
この状態で、記事でnoteMapアイコンをクリックすると以下のステップで地図が表示されます。

１．登録した場所の経緯度を取得する

noteMapアイコンをクリックすると、記事Idを元に地図の種類と経緯度が取得できます。
経緯度をパラメタに加え、タイプ１の地図ページを呼び出します。

<?php
・・・
$url = $_GET['url'];
$uId = $_GET['uId'];
$aId = $_GET['aId'];
$title = $_GET['title'];
$param = "url=".$url."&aId=".$aId."&uId=".$uId."&title=".$title;

$host = "・・・";
$dbname = "・・・";
$user = "・・・";
$pass = "・・・";

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $SQL = "SELECT * FROM areas WHERE ArticleId = :articleId";
    $stmt = $pdo->prepare($SQL);
    $stmt->execute(['articleId' => $aId]);
    $area = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($area) {
        $mapType = $area['MapType'];
        $lat = $area['Lat'];
        $lng = $area['Lng'];
        $newUrl = $area['NewUrl'];
        $oldUrl = $area['OldUrl'];
        $articleId = $area['ArticleId'];
        $userId = $area['UserId'];

        if ($mapType == 1) {
            header("Location: noteMapType1.html"."?lat=".$lat."&lng=".$lng."&".$param);
            exit();
        　　・・・
        }
    　　・・・
    }
} catch (PDOException $e) {
    echo "Error: " . $e->getMessage();
}
?>

２．登録した場所の地図を表示する

呼び出されたタイプ１の地図ページでは、下記のようにパラメタから経緯度を取得し、地図を表示します。

noteMapType1.html内のJavascriptコード

 function initMap() {
    const urlParams = new URLSearchParams(window.location.search);
    const lat = parseFloat(urlParams.get('lat'));
    const lng = parseFloat(urlParams.get('lng'));
    // 初期画面
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: lat, lng: lng },
      zoom: 15,
     });
　・・・
}

３．動作確認

🖱前回と同じ沖縄の末吉公園の記事でnoteMapアイコンをクリックします。

前回は地図が未登録だったので、沖縄の末吉公園の地図を登録しました。
今回は地図が登録されているので、沖縄の末吉公園の地図が表示されます。
他の記事秋のお江戸で和に浸ると福島おやこ旅についても確認しました。

地図タイプの設計

今回は、地点タイプ（タイプ１）の地図の登録から表示までを行いました。
地図タイプ全体は次のように決めることで、各種タイプの地図サービスを開発した場合の収まり場所を決めておきます。

大きく分類すると「これから作成する地図」、「noteMapで作成する地図」、「noteMap以外で作成した地図」です。

具体的には以下とします。
タイプ２以降はタイプ３、タイプ４と順に作成していきます。
タイプ８がマックスですが、それ以降はないものと思います。
これから作成する地図
・タイプ０　地図の登録、⑩ではタイプ新(noteMapNew.html)
noteMapで作成する地図
・タイプ１　地点タイプ、前回の⑫と今回⑬の開発対象
・タイプ２～　将来開発で未定義、ルートやマーカーなどを考えています。
noteMap以外で作成した地図
・タイプ９　独自タイプ、⑩の本サービスの外で作成した地図

終わりに

ようやく地点タイプの地図情報保存と表示までが動くようになりました。
地図タイプを設計して、単純地図以外の地図サービス作成時の収まり場所を決め、開発対象がはっきりしてきました。

なお、記事に地図を作成して不愉快と感じられた場合、コメントしていただければ地図を削除いたします。

参考１：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 登録した場所を表示する⑬（本記事）