YOLP（地図）の「Yahoo! JavaScriptマップAPI」が表示されずに背景がグレーになってしまったときの対処法

2020-02-08

症状

Nuxt.jsでYOLP（地図）の「Yahoo! JavaScriptマップAPI」を使おうとすると、背景がグレーのまま、ロゴとコントロールしか表示されませんでした。

灰色のところをドラッグするとカーソルが手を握った形になり、地図の画像が読み込まれているようでした。

え、謎すぎる…

解決

これは解決したときの歓喜のツイート

このサイトに書いてあったーー！！！！！https://t.co/FNGuXzP16k

こんなのさすがにわからん
ググり力がこれほどまでに重要だったとは
3週間の進捗これしかないんだぞ https://t.co/8jAUU4fZc7
— たかめろん (@takameron_info) February 2, 2020

こちらのサイトに解決法が紹介されています。
なんと！地図として読み込まれている画像の、CSSの設定が原因でした。

div要素のidを map にしたとき、以下のCSSをあてると無事に地図が表示されました。

1
2
3


#yahoo_map img {
    max-width:none;
}

まとめ

実は、この問題に取り組んでいるときに、試しにGoogle Mapsのiframeを表示させようとしました。しかし今度は、地図は表示されるものの、ドラッグしても動かない…

ブラウザの開発ツールでいじくっていると、CSSのheight属性が定義されていました。試しにチェックを外してみると、無事に動作しました！

Yahoo!地図もGoogle マップも、ドラッグ操作に応じて地図の画像を読み込んで表示しています。外部サービスの画像が表示されないときは、CSSを疑って、とくに大きさを定義している場合は注意したほうが良いと、勉強になりました。