Googleマップをホームページやブログに設置するやり方

• 公開日 : 2012年9月26日
• カテゴリ : Web制作

前回の記事で話したとおり、制作したホームページやブログのページの中にGoogleマップを組み込むやり方を今回は説明しよう。

誰でも設置できるように超丁寧に説明するので、この記事だけでは収まらずに複数の記事にわたっての説明になってしまうが、がんばって読み進めて設置していただきたい。

Googleマップ設置の完成図

まず完成図は前回紹介したように以下のページのような感じになる。
(サイト削除しました)
マップに表示する場所や範囲・大きさはあなたの自由に変更できるので大丈夫だ。

HTMLファイル内を編集する

では説明しよう。
まずあなたのホームページやブログの中にGoogleマップを設置するためには「JavaScript」というプログラム言語を使用するため、HTMLファイルのhead要素内に「このファイル内ではJavaScriptを使用しますよ」という宣言をすることが推奨されている。(HTML5の場合は不要らしいのでやらなくても良い)

あくまで「推奨」なので、この記述を書かなくてもGoogleマップの設置自体は可能なのだが、今時は書くのが基本である。
なので以下のコードをそのままコピーしてhead要素内に貼り付ける。

<meta http-equiv="Content-Script-Type" content="text/javascript" />

次に、同じくhead要素内にGoogleマップのAPIへのリンクを記述する。
これも基本的には以下のコードをそのままコピーしてhead要素内またはbody要素の一番下にでも貼り付ければOKだ。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

上記のコードの中で「sensor=true」という部分があるが、これはスマートフォンのようなGPS機能がある機器を閲覧対象にする場合はtrue、パソコンのようなGPS機能がない機器を閲覧対象とする場合はfalseにする。
わからない場合はtrueにしておいて、ページを閲覧した際に問題があるようだったらfalseにすればいいのではないでしょうか。

次に、ページ内のGoogleマップを表示させたい箇所に以下のコードを記述する。
これも以下のコードをそのままコピー・ペーストで良い。

<div id="map_canvas"></div>

上記のコードではid属性の値が「map_canvas」となっているが、この名前は基本的には何でも良い。
何でも良いが、名前を変更した場合には後で説明する設定ファイル内のmap_canvasの部分もすべて同じ名前に変更する必要があるため、その点だけは注意が必要だ。

このdiv要素内にGoogleマップが表示されることになるため、表示サイズなどはCSSファイルからこのdiv要素を指定して自由に設定すれば良い。
なにぃ？ CSSが何かわからないだと！？
よーしわかった、そのような人はさっきのコードの替わりに以下のコードを貼り付けるのだ！

<div id="map_canvas" style="width : 500px; height : 300px;"></div>

上記のコードは横幅が500ピクセル、縦幅が300ピクセルで表示されるという指定になっているので、数字の部分をあなたの好みのサイズに変更すればOKだ。(もちろん半角で)

ちなみにこのようなCSSを使う場合は「このファイル内ではCSSを使用しますよ」という宣言として以下のコードをhead要素内に記述することが推奨されているので、コピーしてそのまま貼り付けておくとベターである。(これもHTML5の場合は不要らしい)
冒頭で説明したJavaScriptの宣言の付近にでも記述しておくと良い。

<meta http-equiv="Content-Style-Type" content="text/css" />

長くなってしまったので、次回の記事に続く。

2012年10月3日追記：Googleマップを設置するやり方の続きを書きました。