山を登る人のためのコミュニティサイト
トップ 地図 カレンダー 花辞典

Google Maps APIの使い方
 Menu >> やってみよう 初期化 イベント サービス TIPS 制限

もっとも簡単な表示
　サンプル1
好みにカスタマイズ
もっとも簡単な表示
もっとも単純にGoogleマップを表示するサンプルを示します。

<HTML>
  <HEAD>
    <SCRIPT TYPE="text/javascript" SRC="http://maps.google.com/maps/api/js?sensor=false"></SCRIPT>
    <SCRIPT TYPE="text/javascript">
function initialize()
{
  new google.maps.Map(document.getElementById("map_canvas"),
    {
      zoom: 8,
      center: new google.maps.LatLng(36, 139),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  );
}
    </SCRIPT>
  </HEAD>
  <BODY ONLOAD="initialize()">
    <DIV ID="map_canvas" STYLE="width:400px;height:300px;"></DIV>
  </BODY>
</HTML>
表示サンプル

HTMLのJAVA Scriptです。
これは、ほぼ最小限の記述です。このままHTMLとして保存すれば、とりあえずGoogleマップを表示できます。
「center: new google.maps.LatLng(36, 139)」の行は緯度経度、「zoom: 8」はズームレベルですので、ここを書き換えれば初期表示位置を好きな場所に変更できます。
大丈夫、以下に、このソースをもう少し詳しく解説します。

地図を表示したい位置にDIV要素を書く
あなたのサイトの地図を表示したいページのHTMLで、地図を挿入する場所にDIVタグを書きます。

<DIV ID="map_canvas" STYLE="width:400px;height:300px;"></DIV>

<BODY></BODY>内に記述してください。
このコードのように、DIVタグには最低限、IDと幅、高さを指定します。400pxとか300pxの部分を書き換えるだけで地図の大きさを変えられます。

HEAD要素内でAPIを読み込む
<HEAD></HEAD>内に以下の一行を書きます。

<SCRIPT TYPE="text/javascript" SRC="http://maps.google.com/maps/api/js?sensor=false"></SCRIPT>

Maps API JavaScriptを読み込んでいるのですが、当分、何も考えずそのまま記述すれば問題ありません。

BODYタグで初期化コードを呼び出す
BODYタグにONLOADのイベントを追加して、初期化関数を呼び出すようにします。

<BODY ONLOAD="initialize()">

HEAD要素内で初期化関数を書く
<HEAD></HEAD>内に以下を書きます。

<SCRIPT TYPE="text/javascript">
function initialize()
{
  new google.maps.Map(document.getElementById("map_canvas"),
    {
      zoom: 8,
      center: new google.maps.LatLng(36, 139),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  );
}
</SCRIPT>
Googleマップを生成し、表示したい位置に埋め込んだDIVタグのIDを指定して、そこに地図を表示するようにしています。
あわせて、ズームレベルと初期表示位置の緯度経度、地図の種類（マップタイプ）を指定しています。

少し説明しますと、google.maps.Mapは、地図オブジェクトを作成するコンストラクタです。２つの引数をとり、１つめにDIVタグのオブジェクト、２つめにオプションを記述します。
１つめの引数は、document.getElementById関数でHTMLページ内のDIV要素を取得して渡します。
２つめの引数は、{}で囲った連想配列の形式で初期化オプションを渡します。ズームレベルと緯度経度、マップタイプの３つは必須項目ですが、それ以外にもいくつかのオプションが用意されていて、必要により指定できます。
とりあえずこの通りに書いて、好みにカスタマイズしていきましょう。

まずはこれだけでＯＫ
以上で最低限の地図が表示できます。
Googleマップを表示するページを作成するときは、とりあえず上記内容をそのまま記述して、それから、追加、変更していく形で進めていくとよいでしょう。


好みにカスタマイズ