• 小
  • 中
  • 大

ページの基本構成


Webページの中でGoogle Maps APIを使い地図を表示する場合にHTMLタグにどのような記述が必要か順を追って説明します。APIキーは不用となっています。

ベースのHTMLとして下記XHTMLページを利用します。
<!DOCTYPE html "-//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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps ｖ3 JavaScript API サンプル</title>
</head>
<body>
<p>Google Maps ｖ3 APIを使ったサンプル地図。</p>
</body>
</html>

一般的なXHTMLページです。

HTMLタグ内でGoogle Maps ｖ3 APIを使用する為には、最初にGoogle Maps　ｖ3 APIを使用するのに必要なGoogle発行のJavaScriptコードを読み込みます。以前はＡＰＩキーが必要でしたが現在はｖ２のバージョンを含めて不要となりました。下記のように読み込みます。
<!DOCTYPE html "-//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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps ｖ3 JavaScript API サンプル</title>
<script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<p>Google Maps ｖ3 APIを使ったサンプル地図。</p>
</body>
</html>

パラメータとして「sensor」に値が設定されていますが、携帯端末のようにＧＰＳ情報を持つ場合,値をtrueにＰＣ上から利用する場合はfalseに設定します。

次はこのページをブラウザで表示した際、地図を表示するエリアをdiv要素を使ってbodyタグ内に記述します。このdiv要素（id）に地図が埋め込まれます。
<!DOCTYPE html "-//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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps ｖ3 JavaScript API サンプル</title>
<script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<p>Google Maps ｖ3 APIを使ったサンプル地図。</p>
<div id="map_canvas" style="width:500px; height:300px"><div>
</body>
</html>

上記の場合は、地図のサイズ横500ピクセル、縦300ピクセルのマップが表示されます。

次に地図を表示するために必要な設定をスクリプトに記述します。（座標やズームレベルなどを設定）
<!DOCTYPE html "-//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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript ｖ3 API サンプル</title>
<script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
      var latlng = new google.maps.LatLng(35.658704,139.745408);
      var opts = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map
        (document.getElementById("map_canvas"), opts);
    }
</script>
</head>
<body>
<p>Google Maps ｖ3 APIを使ったサンプル地図。</p>
<div id="map_canvas" style="width:500px; height:300px"><div>
</body>
</html>

これでinitializeのスクリプトが呼び出された時点で地図は表示されます。

通常は、記述ページがブラウザに読み込まれた後で表示することが多いため。次のようにbody要素のonload属性に呼び出したい関数を指定します。
<!DOCTYPE html "-//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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps ｖ3 JavaScript API サンプル</title>
<script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
      var latlng = new google.maps.LatLng(35.658704,139.745408);
      var opts = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map
        (document.getElementById("map_canvas"), opts);
    }
</script>
</head>
<body onload="initialize()">
<p>Google Maps ｖ3 APIを使ったサンプル地図。</p>
<div id="map_canvas" style="width:500px; height:300px"><div>
</body>
</html>

ページの読み込みが完了した後に指定した関数（initialize）が呼び出されて地図を表示します。

表示例　東京タワーを座標設定


Google Maps サンプル　>　ページの基本構成