1-2. まずは表示してみよう「Hello World」

　まずは地図を表示するところからはじめてみましょう。 Google Maps API v3ではv2と比べて、名前空間が大きく変更されました。全てのGoogle Maps API に関する機能は、google.mapsクラスに定義されています。例えば、地図インスタンスを作成するには、今までは

var map = new GMap2(・・・);

としていたものが

var map = new google.maps.Map(・・・);

という書き方になりました。　それではさっそくコードを見てみましょう。

<html>
  <head>
    <title>Hello world in Google Maps API version3</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        var centerPos = new google.maps.LatLng(35.658613, 139.745525);
        var mapOptions = {
          zoom : 18,
          center : centerPos,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%;height:100%"></div>
  </body>
</html>

Hello world (Google Maps API version3版)
map_1-2.html

東京タワー周辺の地図が表示される

Google Maps API の読み込み

<html>
<head>
  <title>Hello world in Google Maps API version3</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

　上記コードの部分は、Google Maps API v3 のライブラリを読み込んでいる部分です。 <script>タグでは、Google Mpas API v3のライブラリをロードしています。指定するURLは http://maps.google.com/maps/api/jsです。Google Mpas API v2とは異なるので注意してください。
　このURLの指定の中でsensor パラメータが指定されています。 Google Maps API v3では、このsensor パラメータが必須になりました。 sensor パラメータを使うような地図を作るような場合でなければ、通常はfalseを指定すればよいでしょう。

sensorパラメータを指定しなかったときに表示されるアラート
sensorパラメータを指定しなかったときのアラート

地図の表示

<script type="text/javascript">
  function initialize() {
    var centerPos = new google.maps.LatLng(35.658613, 139.745525);
    var mapOptions = {
      zoom : 18,
      center : centerPos,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  }
</script>

　Google Mpas API v3 で地図を表示するに当たって大きく変わったのが、Mapインスタンスを作成するときに mapOptionsを使って地図の表示方法を指定する点です。Google Mpas API v2 のときのようにデフォルト値がありません。そのため最低限、ズームレベル、地図の中心の経度緯度、地図タイプIDの3つを指定しないと地図が表示されません。地図タイプIDには次の値を指定することが出来ます。

Google Maps API v3で指定可能なMapTypeID
指定可能なMapTypeID	説明
ROADMAP	通常の市街地の地図を表示します
SATELLITE	航空写真を表示します
HYBRID	航空写真上に主な道路名や名称などを表示します
TERRAIN	地形や樹木などの地形的特徴を持つ地図を表示します

　Mapインスタンスを作成した後から、個別に指定することも出来るので、サーバーからのデータを取得してから動的に地図を表示させるようなこともできます。

var map = new google.maps.Map(document.getElementById("map_canvas"));
map.setCenter(new google.maps.LatLng(35.658613, 139.745525));
map.setZoom(18);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);

地図を表示するためのDOM要素

<div id="map_canvas" style="width:100%;height:100%"></div>

　<div>〜</div>の部分に地図が表示されます。Google Maps API v2 と同様に明確にサイズを指定する必要があります。
上記の例では、<div>タグに幅・高さともに100%を指定しています。100%が指定されると、モバイル端末上ではスクリーンサイズにフィットします。

スクリプトの実行

<body onload="initialize()">
  ：
</body>

　<body>タグのonload 属性を利用してinitialize()関数を呼び出しています。Google Maps API のコードを書くときには必ず<body>タグのonload 属性または、windowオブジェクトのonload イベントを利用してください。Google Maps のライブラリは DOM要素の位置を基準にして地図を表示させているため、Internet Explorer 6などの古いブラウザでは表示範囲が途切れてしまうなどの問題がある場合があります。