Google Maps APIを使ったページの基本構成

Webページの中でGoogle Maps APIを使ったコンテンツを使用する場合のページにどのような記述をしていけばいいのかを確認します。なおV2まで必要であったAPIキーは不用となっています。

まずベースとして次の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 JavaScript API サンプル</title>
  </head>
  <body>
    <p>Google Maps APIを使ったサンプルです。</p>
  </body>
</html>

静的コンテンツだけが記載されたページと同じです。

WebページでGoogle Maps APIを使用するまず初めにGoogle Maps APIを使用するのに必要なJavaScriptコードを読み込みます。このコードはGoogle側で用意されており、次のように読み込みを行います。

<!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 API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
  </head>
  <body>
    <p>Google Maps APIを使ったサンプルです。</p>
  </body>
</html>

パラメータとして「sensor」に値が設定されていますが、このパラメータについては次のページ以降で説明いたします。

次にページをブラウザで表示した時に、地図を表示するエリアをdiv要素を使ってページ内に記述します。このdiv要素が後から地図に置き換わります。

<!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 API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
  </head>
  <body>
    <p>Google Maps APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

上記の場合だと「Google Maps APIを使ったサンプルです。」と表示された下に地図が表示されることになります。地図のサイズは横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 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.709984,139.810703);
      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 APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

先ほど記述したスクリプトが呼び出された時点で地図は表示されます。どのようなタイミングで地図の表示を行うのかは自由に決めて頂いて構いませんが、Webページがブラウザに読み込まれた後で地図を表示する場合は次のように記述します。

<!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 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.709984,139.810703);
      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 APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

body要素のonload属性に呼び出したい関数を指定します。するとページの読み込みが完了した後に指定した関数が呼び出されて地図の描画が始まります。

Webページの中にGoogle Maps APIを記述する基本構成は以上となります。

サンプルコード

では実際にブラウザで表示させてみます。

map6_1.html

<!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 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.709984,139.810703);
      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 APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

ブラウザで上記ページを開くと次のように表示されます。

p6-1

Webページ上に地図が表示されました。このように簡単に指定した座標の地図をWebページに表示させることができます。

( Written by T.buzz.Ikura+ )

Social Button

Facebook Page