Google Mapsを自サイトに設置する

Google Maps はじめの一歩

前ページの方法で、自分のサイト専用のAPIキーを手に入れたら、何はともあれ、設置してみましょう。 キーを入手した時に表示されたソースを設置してみました。→サンプル

試しに、ドラッグしてみてください。どうですか?グリグリ動きますね?

【上記サンプルのソース】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" 
content="text/html; charset=UTF-8" />
  <head><title>Ajax</title>
    <!-- 下記キーは、必ず自分専用のものをhttp://www.google.com/apis/maps/
         で取得して使ってください -->
     <script 
       src="http://maps.google.com/maps?file=api&v=1&key=自分のキー&datum=wgs84" 
       type="text/javascript"></script>
  </head>
  <body>
  
    <!-- ここへ地図を出力します↓ -->
    <div id="map" style="width: 500px; height: 400px"></div>
    
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(139.74541783332825, 35.65870845033576), 1);
    
    //]]>
    </script>

  </body>
</html>
上記コードの、map = new GMap(document.getElementById("map"));は、GMapクラスのインスタンスを作り(Google Mapsを使えるようにして)、用意したID名がmapのDIVへ出力するという意味です。あとは、代入した変数mapがオブジェクトとなっていろいろな命令を使えるようになります。

次の行のメソッドcenterAndZoom()は、中心となる経緯度座標とズームレベルを引数で与えて地図を表示します。座標は、new GPoint(経度,緯度)の書式でオブジェクトとして渡します。ズームレベルは、整数値で渡し、0が最も詳細で値が大きくなるほど広域になります。

座標の値は、2005.11現在は、日本周辺では、日本測地系が使われていますが、2005.12.1より世界測地系(WGS84)に変更になります。 詳細は、Google-Maps-API-Japanなどでご確認ください。多少複雑な事情がありますが、とりあえず、Google Maps上で座標を拾ってGoogle Mapsで表示する分には測地系の問題は生じません(ただし、2005.11.30以前は、&datum=wgs84オプションを利用してください。参考→経度・緯度を調べる(地図作成作業補助サンプル))