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

Google Map APIを使って地図を作っていたんですが。

ペグマン表示されてないじゃん！！

幸い同じ現象について書いてる人がいたので無事解決。
ペグマン帰ってきました。

ペグマンとは

ペグマンとは、Googleが提供する地図サービス「Googleマップ」や「Google Earth」と、路上風景や自然の景観を全方位パノラマ画像で閲覧できる「Googleストリートビュー」との連携に用いられる人型のアイコンのことである。

IT用語辞典

IT用語として登録されるくらい有名みたいですね。
Googleらしくイースターエッグが仕込まれているのは初めて知りました。

Jetstream BLOG

「Google マップ」特定地域で変身するペグマン、知ってた？

https://jetstream.bz/archives/91405

「Google ストリートビュー」の人間型アイコン「ペグマン」 実は特定の地域において「ペグマン」は変身します ハワイの人魚、ネス湖のネッシー、エリア 51 の UFO などなど 「Google マッ

Jetstream BLOG

 

1 Pocket

知ってた？「ストリートビュー」ペグマン誕生日イースターエッグ

https://jetstream.bz/archives/138787

「Google ストリートビュー」のペグマンは誕生日にお祝いしてくれるって知ってた？ユーザーの誕生日限定でいつもと違うペグマンに。誕生日の方は是非試してみてください。

ペグマンが表示されない件

作った地図に何か空欄が表示されてるなぁと思ってたらペグマンの場所でした。
特に何かを指定したわけではないのになぜ。。。

ローカルで確認してみたらちゃんと表示されるので、どうやらWordPressのテーマが干渉してるみたいです。

原因はimgに対するmax-width:100%

とりあえずググってみたらこんな記事が。

MY-TERRACE（マイテラス）

Google map埋込apiでペグマンの画像が消えて表示されなくなった時のcss対処法 | MY...

https://my-terrace.com/gmap_pegman_err_css/

先日、web制作でgoogle map apiを使って、デザインを白黒にカスタマイズした地図を埋め込みしていたところ、「ペグマンがいない」とのご指摘を頂き、原因と対処法を調べたので、紹介します。

なるほど、width:100％になってるのが原因だと。
というか地図上のオブジェクトってDOMに記載されてたのか。

ということでWordPressのDOMを確認。
地図の上だと右クリック > 検証が使えないのでソースを直接「ペグマン」で検索します。

imgがmax-width:100%になってる。
自分では設定してないのでWordPressの影響でしょう。

max-width: initial; する

max-width:100%を打ち消したいわけですが、これにはautoではなくinitialを設定して初期化せよということでした。
他の場所に影響が出たら嫌なので、自作の地図内だけ指定するようにします。

これでmax-width:100%が打ち消され、ペグマンが表示されるようになりました。

そもそもペグマンいらないかも

簡単に直せたのでとりあえず再表示させましたけど

自分で作った地図にペグマンいらないかもしれない。

ストリートビューするような用途じゃないですしね。
デフォルトで表示されてるボタンはJavaScriptで指定すれば非表示にできるのでそのうち直そうかな。

関連