プログラミング

Google Map APIでCustom Popupsを描画する

2022-06-12




前回はMarkerというパーツを使って地図上にリンクを乗っけてたんですが。
このMarker、テキストを表示しようとしたらツールチップになってしまい、うまく表示ができなかったんですよね。。。

Google Map APIで地図にMarkerを描画する

趣味で撮る写真をどうにか整理したくて。 ただリンク張るだけだと面白くないので、Google Map APIで地図の上にMarkerとリンクを描画してみました。 ついでにWordPressの上でJSファ ...

続きを見る

そこでAPIのサンプルを眺めていたら、OverlayViewというクラスをカスタムして自作のポップアップを描画できると。
見た目もCSSで飾れて便利そうなので置き換えてみました。

参考サンプル

今回やりたいのに近いのはこれ。
対象の位置情報に吹き出しを立てる感じ。

ただこのサンプルはType Script版しかなかったので、こっちも参考にしました。
指定した範囲に画像を表示して、ボタンで表示/非表示を変えられるようになってます。

変更点

最終的にやってることは同じなんですがパーツが変わってます。
他にもいろいろいじってあるので、ソース自体は前回とだいぶ変わってます。

大きく変わったのはこの辺り。

Marker → OverlayViewに変更

USGSOverlay classの拡張

そのまま使えばよかったMarkerと違って独自のポップアップを表示するにはUSGSOverlayをいろいろ改造しないといけません。
google.maps.OverlayViewを継承したclassを作って必要な処理を追加していきます。

classの拡張は画像を表示してるサンプルをベースにしました。

USGSOverlay classの読み込み

USGSOverlay classはAPIが持つクラスを拡張しているので、classを読み込む時点でAPIが使えるようになっている必要があります。
initMap()が発火したら使用可能になったということなので読み込み処理はここに書きます。

フロントJSだとimportが使えないらしいので、USGSOverlayをglobalで宣言しておいて

readUSGSOverlayClass()でclassを変数に入れて…

あとは使う時にnewすればOK。

JSのお作法としてこれでいいのかよくわからないですが動くことは動きますw

アイコンの再描画をvisible/hiddenで制御するようにした

サンプルの解説によると

単純にオーバーレイを作成 / 削除するのではなく、表示 / 非表示を切り替えたい場合は、独自の hide() メソッドと show() メソッドを実装してオーバーレイの表示状態を変更できます。代わりに、地図の DOM からオーバーレイを取り除くこともできますが、この操作の費用は若干高くなります。なお、地図の DOM に再度オーバーレイを貼り付ける際は、オーバーレイの onAdd() メソッドをもう一度呼び出す必要があります。

下手な実装をすると想定外の請求をされる可能性があると。。。
正確な課金タイミングはよくわからないですが、とりあえずaddやらsetやらやると課金されるってことかも。

ということで、サンプルに倣ってhide()、show()で表示を切り替えるようにしました。
具体的にはnewして作ったoverlayを配列に入れて取っておいて

表示切替用のボタンをクリックしたときにtoggle()を呼び出します。

HTML上に書いていたラジオボタンを地図上に表示するようにした

サンプルを見ていたら、地図自体にボタンを追加している模様。
HTML側にラジオボタン描くのもちょっと。。。
なので真似します。

map.controlsに要素を追加すれば地図上に表示されます。
どこに追加するかはここを参考に。

ただ、このボタンのレイアウトがちょっと難しくて。。。
Googleデフォルトのボタンみたいに隙間なく並べたかったんですが、

  • margin-rightがないと右側の隙間が作れない
  • divに入れるとボタンが全部左に寄ってしまう

ということで一旦諦めました。
CSS得意な人なら直せるんでしょうけど。。。

さらにスマホの縦画面で見るとこう。
幅が足りないせいでデフォルトの地図や航空写真のボタンと重なってしまいました。
これはもう場所の問題ではないので、文字じゃなくアイコンにするなど省スペース化しないとダメそうですね。
ここら辺はまぁ、いつか直すということで。。。

ちなみにこの画像だとペグマンが表示されず空欄になってますが、WordPress側のCSSが干渉してたので修正しました。

ペグマンが行方不明になるので修正

Google Map APIを使って地図を作っていたんですが。 ペグマン表示されてないじゃん!! 幸い同じ現象について書いてる人がいたので無事解決。 ペグマン帰ってきました。 目次1 ペグマンとは2 ...

続きを見る

ソース全体

WordPressに載せるためHTMLにJSの読み込みなんかを書いてません。
足りないところはいい感じに足してください。

Googleのサンプルをコピってるので一部英語が残ってます。。。

地図表示.html

スタイル.css

CSS書くのが苦手過ぎる。

データ.js

無駄に多言語化を意識しているけど実装するかは未定。

描画処理.js

USGSOverlay classを別ファイルにしたかったけど諦めた…。

API、奥が深い…

普段仕事でJSやCSSを書かないので新鮮だけど詰まるところが結構ありますね。
ドキュメントは充実してますが、英語だったりTypeScript版しかなかったりで読み込むのが大変です。

Googleが提供するサービスは変化が速いので参考書はすぐ陳腐化してしまうよなぁと思いつつ、知らない機能は使いようがないのでパラパラ眺めてみるとさらに最適な機能が使えるかもしれないですね。

関連

Google Map APIで地図にMarkerを描画する

趣味で撮る写真をどうにか整理したくて。 ただリンク張るだけだと面白くないので、Google Map APIで地図の上にMarkerとリンクを描画してみました。 ついでにWordPressの上でJSファ ...

続きを見る

ペグマンが行方不明になるので修正

Google Map APIを使って地図を作っていたんですが。 ペグマン表示されてないじゃん!! 幸い同じ現象について書いてる人がいたので無事解決。 ペグマン帰ってきました。 目次1 ペグマンとは2 ...

続きを見る

Google Map APIのデフォルトボタンを非表示にする

前回自分で作ったGoogole Mapからペグマンが行方不明になってた件。 表示自体は直ったけど、やっぱりストリートビューボタンいらないよね? ということで非表示にしちゃいました。 Google Ma ...

続きを見る

-プログラミング
-, ,

© 2022 そんなこと猫でもできる Powered by AFFINGER5