KaorinこんにちはKaorinです。Googleマップは使わずに、地図画像にピンを立てたりヌルヌル動かせるプラグインを見つけたので紹介します。「OpenSeadragon」というプラグインを使用しました。トップページのサンプルがヌルヌル動いて期待できます。OpenSeadragonはdziファイル(タイル状に画像を分けたデータ)などを取り扱うことができます(というかそれがこのプラグインの主な使い方です)。画像をズームした時にタイルを随時読み込むデータです。Imagesを参考にしてください。規格の画像生成と表示が分かりやすかったです。今回はjpg画像をそのまま使う方法で実装します。APIを参考にどうぞ。地図画像をドラッグして動かしたりズームインアウトさせたいだけでしたら、導入はとても簡単です。※一枚で実装する場合、5,000pxぐらいのデータだとiosで画像が表示されなくなるので注意が必要です。//表示される画像サイズ。OpenSeadragonGoogleマップのようにピンを立てる地図にはピンが欲しいですよね。Overlayを参考にすることでピンを立てることができます。ホバーイベントでポップアップ表示も可能です。{tip.hide();});}ピンを立てる座標を確認するViewportの値が画像内の座標になります。Coordinates終わりにOpenSeadragonを日本語で解説しているサイトがなかなか見つからず苦戦しましたが、すべての答えは公式サイトに書いてあるなあ(英語で!)ということを改めて知れました。Googleマップのような地図を作りたい場合はOpenSeadragon一択でいいのではないかと思うほどシンプルで美しいプラグインでした。検証Kaorinまめなりでコーディング担当のかおりんです。コーディングを楽しくできるように勉強したことを記事にしたいな。【プラグインをがっつり使用編】カスタムフィールドを入れ込んだカスタム投稿タイプを作る流れ新しい投稿2022年、あけましておめでとうございます。株式会社まめなり武蔵野市のWebサイト(ホームページ)制作会社です。よいホームページは、笑顔がうまれる。