自作の地図をグーグルマップのようにしたい

自分で作図した地図に、グーグルマップのような機能を持たせたものを作りたいと思っています。

（1）ブラウザ上で表示したい。
（2）マウスのホイールで拡大・縮小ができるようにしたい。
（3）XMLなどの別ファイルから情報を取得し、指定する座標にピン画像を配置したい。合わせてツールチップを用いて、マウスオーバーで説明が表示されるようにしたい。
（4）グーグルマップは地図画像の他に航空写真やストリートビューへの切り替えができるように、地図自体がレイヤー構造になっていて、選んだレイヤーごとに画像とXMLを切り替えて、ピン画像の位置やツールチップの説明内容を切り替えられるようにしたい。

上記の内容では、ほぼほぼ案件的になってしまっています。

これを実現できるようなオープンソースのライブラリがあれば教えていただきたく存じます。

（4）については、（1）から（3）までが実現できるようであれば、最悪AJAXの「タブ切り替え」で対応しようと思っています。

以上、よろしくお願いいたします。

No.3 ベストアンサー 回答者： fujillin 回答日時： 2022/11/15 19:23

No1です

＞地図上にXMLファイルなどで座標軸に合わせてピン画像やツールチップを配置したいと思っています。
＞そのやり方についても何か参考文献が有りましたら教えていただきたく存じます。
google map は、以前はXMLの読み込み等にも対応していたようですが、どうやらその機能は削除されてしまったようですね。（KMLに完全に切り替えたのかな？）

ですので、読み込みとパースに関しては自前で実装する必要があるようです。
https://www.google-mapi.com/event-data-processin …

ただし、KMLデータであればサポートされていると思われます。
https://developers.google.com/maps/documentation …

※ google map 関連のドキュメントは上記サイトに全て記されていますので、何かを調べたい時には、ここで調べるのがよいと思います。



オープンソースのライブラリであれば、他にも Leaflet などでもほぼ同様のことが可能ではないかと思います。
（ほとんど使ったことはないので、詳細はわかりませんけれど・・）
https://leafletjs.com/index.html

この回答へのお礼

お返事ありがとうございました。

Googleマップのライブラリを用いる方法のほうが導入の敷居が低いようなので、まずはこれでやってみようと思います。

ただ、複数の地図画像を併用してレイアウトするには、オープンソースのライブラリを用いないとできないことも多く含んでいそうなので、こちらもチャレンジしてみようと思います。

お忙しい中、丁寧に教えていただき、ありがとうございました。重ねてお礼申し上げます。

お礼日時：2022/11/28 09:29

No.2 回答者： fujillin 回答日時： 2022/11/15 13:11

こんにちは

確か、google map では自作の画像タイルを地図代わりに表示する方法も提供していたと思います。
https://developers.google.com/maps/documentation …

通常のmapに画像を埋め込むこともできたかと・・

この回答へのお礼

貴重な情報ありがとうございました。
画像の拡大・縮小、複数画像のレイヤー構造（多分）については、教えていただいたURLのドキュメントでなんとかできそうです。

これ加えて、地図上にXMLファイルなどで座標軸に合わせてピン画像やツールチップを配置したいと思っています。そのやり方についても何か参考文献が有りましたら教えていただきたく存じます。

よろしくお願いいたします。

お礼日時：2022/11/15 18:31

No.1 回答者： Georgia.Rain. 回答日時： 2022/11/15 12:04

まずはその自作の地図とやらがどういう代物なのでしょうか？

画像データなら拡大、縮小は画像処理になりますし、データの集まりであれば作画処理になると思うのですが。

この回答へのお礼

地図自体は画像データ（多分PNGかSVG？）で、拡大・縮小に耐えうる解像度で作成する予定です。

そこに、ピン画像を配置するための「XY座標軸？」情報などをXMLファイルから読み込んで配置させたいと思っています。合わせてマウスオーバー時にはツールチップも表示させたいです。

お礼日時：2022/11/15 18:27