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

広告

Google Maps APIを使ってWebページの中に地図に関するコンテンツを作成する場合、実際にどのような記述をWebページの中に行うのかについて解説します。なおXHTMLベースで解説しますがHTML5でも基本的に尾内jです。

1.Google Maps APIを使ったWebページの構成
2.HTTPS環境での利用
3.サンプルコード

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

まず元となるWebページとして次のようなものを使います。ここにGoogle Maps APIに関する記述を追加していきます。 

<!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 API サンプル</title>
  </head>
  <body>
    <p>自宅の地図です。</p>
  </body>
</html>

最初に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 API サンプル</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=(true or false)">
    </script>

  </head>
  <body>
    <p>自宅の地図です。</p>
  </body>
</html>

2つのパラメータを指定します。「key」パラメータには前のページで取得したAPIキーを記述して下さい。「sensor」パラメータは今回作成するウェブアプリケーションがセンサーを使用するかどうかを"true"か"false"で指定します。(詳しくは別のページで解説します)。

次にWebページが表示された時に地図を実際に表示するエリアを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 API サンプル</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false">
    </script>

  </head>
  <body>
    <p>自宅の地図です。</p>

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

  </body>
</html>

この場合「自宅の地図です。」というテキストの下に地図が表示されることになります。地図のサイズは横500ピクセル、縦300ピクセルにしました。地図のサイズは絶対値でもいいですし「style="width: 100%; height: 100%"」のような指定でもいいのですが必ず指定して下さい。

次に地図を実際に表示するためのスクリプトを記述します。座標やズームレベルを設定し、その後で地図を表示します。(詳細は別のページで解説しますのでここでは気にしないで下さい)。 

<!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 API サンプル</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&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>自宅の地図です。</p>

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

  </body>
</html>

body要素のonload属性に地図の初期化を行う関数を指定していますので、Google Maps APIのスクリプトが記述されたWebページの読み込みが完了した後に指定した関数が呼び出されて地図の描画が始まります。

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

HTTPS環境での利用

HTTPS環境で使用する場合は、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 API サンプル</title>

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false">
    </script>

  </head>
  <body>
    <p>自宅の地図です。</p>
  </body>
</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" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>Google Maps サンプル</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&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>自宅の地図です。</p>

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

  </body>
</html>

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

p6-1

作成したWebページ上に地図が表示されました。今後作成するウェブアプリケーションは今回作成した基本構成に情報ウィンドウやマーカーなどの記述を追加していくことになります。

( Written by Tatsuo Ikura )