YOLP（地図）の「Yahoo! JavaScriptマップAPI」が表示されずに背景がグレーになってしまったときの対処法
症状
Nuxt.jsでYOLP（地図）の「Yahoo! JavaScriptマップAPI」を使おうとすると、背景がグレーのまま、ロゴとコントロールしか表示されませんでした。
灰色のところをドラッグするとカーソルが手を握った形になり、地図の画像が読み込まれているようでした。
え、謎すぎる…
解決
これは解決したときの歓喜のツイート
このサイトに書いてあったーー！！！！！https://t.co/FNGuXzP16k
— たかめろん (@takameron_info) February 2, 2020
こんなのさすがにわからん
ググり力がこれほどまでに重要だったとは
3週間の進捗これしかないんだぞ https://t.co/8jAUU4fZc7
An error occurred while retrieving the Tweet. It might have been deleted.
こちらのサイト
に解決法が紹介されています。
なんと！
地図として読み込まれている画像の、CSSの設定が原因でした。
div要素のidを map にしたとき、以下のCSSをあてると無事に地図が表示されました。
|
|
まとめ
実は、この問題に取り組んでいるときに、試しにGoogle Mapsのiframeを表示させようとしました。 しかし今度は、地図は表示されるものの、ドラッグしても動かない…
ブラウザの開発ツールでいじくっていると、CSSのheight属性が定義されていました。試しにチェックを外してみると、無事に動作しました！
Yahoo!地図もGoogle マップも、ドラッグ操作に応じて地図の画像を読み込んで表示しています。 外部サービスの画像が表示されないときは、CSSを疑って、とくに大きさを定義している場合は注意したほうが良いと、勉強になりました。