Google Mapsをセンター表示する

「新館」ネタが続き恐縮です。なんか、ここのところ、「新館」関連の調子がよいもので…。「新館」の「ザ・公園」では、私の行く森や公園を紹介していますが（まだまだ整備中ですが）、こには所在地をGoogle MapsのAPIを使って表示しています。ところが、下の画面を見ればわかるように、センターに揃わない…。

※この画面は記事を書いた時点のものです。

他のはセンターにあるのに、なぜ揃わないのだろう。ちなみに、マップを表示する部分はdiv要素を使い、width, height属性で大きさを指定しておけば、その大きさで地図が表示されます。このdiv要素にalign属性でcenterを指定しておけばよいのかと思いましたが、どうもそれではうまくいかず長い間放っておきました。

ところが、最近CSSをいろいろ触っている過程で、はたと気付きました。もしかしたら、センターに置きたい要素そのものにcenterを指定してもダメなのでは？中に入る地図は要素一杯に表示されるからセンター指定も意味ないのでは？？

ということで、地図を表示させるdiv要素をさらにdiv要素で囲み、外側のdiv要素にalign属性でcenterを指定してやりました。そうしたら、うまくいくではありませんか。当たり前と言えば当たり前ですが、わかってしまえばあっけないものです。

ということで、こうなりました。

※画面は開発中のものです。笑

上の方に変なボタンが並んでいますが、気にしないで下さい。

ということで、あまり役に立つかどうかわからない、Google Mapsをセンターに表示する、というお話でした。