チュートリアル

Google Mapsを表示する

ここからが本格的なプログラムになります。
ウェブページにGoogle Mapsを埋め込んで表示するには、Google Maps JavaScript API v3を使用します。Google Maps JavaScript API v3はその名の通り、Google社が提供するAPIで、プログラム言語JavaScriptで操作します。早速ソースコードを見てみましょう。

Google Mapsを表示するためのソースコード

Google Mapsを表示するためのソースコードの解説

ソースコードの要点を説明します。

12行目から14行目
Google Maps JavaScript API v3を読み込みます。src属性の値の後ろの「language=ja」は日本語の表記、「region=jp」は日本向けの地図を意味します。両者の指定がなくても地図は表示可能ですが、特に後者の「region=jp」はつけておくことをおすすめします（大韓民国が不法占拠している竹島を、中立的な名称であるリアンクール岩礁と表記されてしまいます）。
35行目
地図の表示領域を指定します。id属性を指定しておき、プログラム中でその値を使用します。HTMLやJavaScriptの記述方法、文法については、詳しい書籍がありますのでGeoBankでは説明を割愛します。
18行目から28行目
Google Mapsを表示させるための関数本体になります。19行目から23行目までは地図表示のためのオプション指定、24行目から27行目が地図を表示させる部分になります。
21行目は地図の中心となる緯度と経度の指定です（北緯36度、東経139.5度が指定されています）。表示された値を変更することで、任意の位置を地図の中心にすることができます（緯度経度は10進法で記述する必要があります）。
25行目で「map_area」の記述がありますが、これは35行目のid属性の値を指定します。
29行目
ブラウザがHTMLを読み込んだ時に、上記の関数を実行させるための指定です。これでGoogle Mapsをウェブページ上に読み込むことが出来ました。
上記ソースコードはこちらから実行出来ます。
Google Mapsを表示