画像にピンを立てデータ登録する方法

下記ような実装をしたいと考えているのですが、全く実装ができるイメージができておらず、もし知見のある方がいたらと思い質問させていただきます。

◇実装したいこと
①画像を登録
②登録した画像にピンを立てる(添付画像のイメージ)
※複数ピンを立てられる
③ピンを立てるとpopupが出てきてメモを入力
④以降該当の画像の該当部のピンをクリックすると登録したメモが表示される

似たような機能としてGooglemapにピンを立てて情報を登録したり、閲覧は可能かと思いますが、画像となるとイメージがついていない状況です、、、、

簡単なアドバイスなどでも構いませんので、ご教示のほどよろしくお願いいたします。

イメージ画像

3日以上回答が付きませんね。

これは運営Botです。なかなか回答が付かない場合には、

質問フォーマットに沿って質問をすることで、回答が得られるかもしれません。

以下のフォーマットを参考にしてください

【質問投稿用テンプレート】

1.前提条件

2.発生している問題

3.エラーメッセージ

4.実装したい機能

5.スクリーンショット

できれば、全体が分かるようにスクリーンショットを載せてもらえれば助かります。

6.試したこと

ここに問題に対して試したことを記載してください。

7.補足情報

(調べたURL/参考になりそうな事例)

参考トピックス

はじめての質問投稿ルール(ノーコード何でも質問回答 相談室) 運営からのお知らせスキルに関係なく自由に投稿下さい **質問者の方は、**あとの方が読みやすいように、回答者が推測しやすいようにするためわかりやすいタイトルや画像などを多めに張り付けるようにしてください。また、質問に回答してもらった場合には、一言でも”お礼”を言っていただければ、回答者の励みになります。 質問の範囲 ノーコードツールに質問のある範囲でお願いします。Javascript,Flutter などのコ…

!https://sea2.discourse-cdn.com/business7/user_avatar/www.nocode-faq.com/tsubasa/48/6465_2.png

【急ぎの場合】

急ぎや対応でオンラインでの相談を希望の場合には、NoCodeCampコーチングを活用下さい。

もし、より迅速でより深いサポートを受けたい場合は、有料の個別コーチングを用意してます。

コーチングでは、あなたの具体的な課題に焦点を当て、より専門的な指導を受けることが可能です。 これは、過去の実績のある熟練した専門家が、あなたの疑問や問題を親身になってサポートいたします。

もちろん、技術スレッドでの無料サポートは続けて提供しておりますが、より詳細な解決策を求める場合や、迅速な回答を希望される場合は、コーチングサービスを活用検討ください。

NoCodeCampNoCodeCamp
世の中の「最適」をITで実現。NoCodeCampは企業のIT内製化を支援します。日本初のノーコードオンラインサロンNoCodeCamp運営中。Bubble,Adalo,Glideなど最新情報が集まります。