埋め込んだGooglemapの角っこを丸くしてクールに設置したい件

「角っこが丸くなったらクールなのかよ！」という意見は受け付けません！ｗ

普通にGoogleMapの埋め込みタグを設置すると、角は四角く表示されます。


大きな地図で見る

↑これじゃあつまらないという事で、今回はこの角をクールに丸く表示してみたいと思います。

角を丸くするにはCSSの「border-radius」を指定することで実現することが出来ます。

以前は角を丸くするために、超試行錯誤してCSSの設定をした記憶がありますが、今は楽なものですね。

「border-radius」様様です！ｗ

さて、設置するとこんな感じですね。


どう？クールでしょ？？ｗｗ

CSSの詳細は以下の通りです。

まあ、border-radiusを適当に指定するだけなんですがね。

#googlemap iframe {
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}

#googlemapというIDの中にあるiframe対しての指定です。

丸みの部分は定義した数字を変更することで調整できます、数が大きくなるほど丸みが増します。色々と変えて試してみてください！

ちなみに、頭付いている-webkit-や-moz-はベンダープレフィックスと言います。


拡張機能的な意味を示します。

各ブラウザが正式にこれらのCSS要素の実装が完璧になれば、これらの表記は不要となるでしょうが、現状ではつけておくのが無難でしょうか。

興味のある方は、「ベンダープレフィックス」というキーワードで検索してみてください！ｗ

HTML部分はこんな感じです。

<div id="googlemap">長いので省略…。ここにはGooglemapのタグ！</div>

グーグルマップ Googleマップ 完全活用術 仕事の効率を上げる無料地図サービスの活用ワザ 著：深川岳志