Google Maps を表示する

Google Maps API V3を使って Google Maps を表示する。

• アプリケーションをHTML5として宣言する
• Google Maps APIを読みこむ

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

位置を返す機能がない機器(PCなど)ではsensorをfalseにする。

• 地図を表示する領域をdiv要素として定義し、サイズを指定する

<div id="aMap"  region="center" title="Map">

サイズの指定は忘れがちなので注意。(サイズが不定だと地図のサイズが0になってしまう。本例では親要素との関係からサイズが決まっているのでOK。)

• 地図のオプションを指定する
  以下の3つは必須。
  - ズームレベル(zoom)
  - 中心(center)
  - 地図種類(mapTypeId)

  var latlng = new google.maps.LatLng(35.709984, 139.810703);
  var opts = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  

• 地図を生成する

gMap = new google.maps.Map(document.getElementById("aMap"), opts);

実行結果：