GoogleのAPIを使用して作成した地図

Google MapやGoogle EarthのAPIを使用して作成した地図へのリンク。

Google Maps APIを使う時の注意点

レスポンシブデザインのテンプレートを使っているときは、CSSのimgタグを変更する必要がある。Twenty Twelveの場合、なにもせずに地図を表示するとマップタイルに区切りができてしまい、見栄えが悪くなってしまう。これは画像の影の影響のためで、その影を消してやるときれいなマップが表示される。

また、ナビゲーションコントロールが崩れて表示されることもあるので、その処理も必要である。

以上のことは、以下のコードを付け足すことで解決できる。

<style>
/* Images */
#map_canvas img { /* #map_canvasは地図表示のID。 */
    max-width: none; /* imgの最大幅設定をデフォルトに */
    box-shadow: none; /* imgの影を消す */
}
</style>