Google Mapsのコントロール、地図の幅と高さが各200px以上ないと表示されない

google アプリ

年度末わっしょいという感じで、見事にここ最近は仕事関連、技術的な内容ばっかりブログに投稿しております。
こういうときってネタには困らなくなるからいいんですが、もうちょっと自分の心を深堀してブログ書きたいところ。。。

さて、Google Mapsのコントロールと聞いてピンとくる方はいらっしゃるでしょうか??

Google Mapsの埋め込みなどをWebサイトで見かけることはたくさんある方も多いと思うのですが、地図埋め込みの右下などによくある「+」「-」マークだったり、ストリートビューに切り替わるための「人アイコン」だったり、このあたりの総称をコントロールと言います。
(僕も最近までこの名称知らなかった・・・)

このGoogle Mapsのコントローラー、地図の幅・高さによっては表示されないということを今回は書きたいと思います!

コントロール表示にはGoogle Mapsの幅と高さが200px以上それぞれ必要

タイトルにも思いっきり結論が書いてあるのですが、Google Mapsのコントロールは、埋め込んだ地図の幅と高さが200px以上ないと、表示されません。

https://developers.google.com/maps/documentation/javascript/controls?hl=ja

Google Maps API公式でも、「地図の幅や高さが200px以下の場合は、デフォルトでコントロールが非表示になる」という旨の内容が書かれているのがわかります。

Google Maps APIを使って表示されたGoogle Mapsだけでなく、直接埋め込みコードを使って埋め込まれたGoogle Mapsに関しても同じことが適用されるようで、先ほど掲載した地図の幅と高さをだいぶ小さくしてみると、

コントロールが表示されていないのがわかります。

小さいサイズのGoogle Mapsだとコントロールを表示させても邪魔??

まあこれは極めて妥当なUIかなと思います。
単純な話。地図の領域が小さければ、コントロールを表示するスペースなんてないでしょうし、表示してしまっていたら、肝心な地図が全く見えない、なんてことになりかねません。

Google Mapsの幅と高さが両方200px以下になってしまうほど小さい地図を埋め込む機会が多いかどうかはさておき、スマートフォンサイトなどの場合は高さのみ200pxを切る地図を埋め込むケースは0とは言えないので、覚えておきたいGoogle Mapsの仕様ですね!