GMapKit-3：イラストの地図を表示する

Google Maps APIは、地図を表示するための関数があらかじめ用意されています。

ただこれを理解して使うのは、少々ハードルが高いです。

そこでGMapKitAPI を利用して、イラストの地図を表示してみることにします。

イラストの地図がされた様子
(表示する)

イラストの地図を表示するサンプルプログラム

イラストの地図を表示するサンプルプログラム

<!DOCTYPE html PUBLIC "-//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 Example</title>
 <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
<script src="http://googlemaps.googlermania.com/gmapkit/api"></script>

 <script type="text/javascript">
 //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        //地図を作成
        var map = new GMap2(document.getElementById("map"));
        //地図を表示
        map.setCenter(new GLatLng(36.668419,137.021484), 5);
        //マップタイプを作成
var opt={
          debug     : 0
         ,minzoom   : 5
         ,maxzoom   : 5
         ,copyright : "(C)GoogleMaps活用講座"
         ,mapurl    : "http://googlemaps.googlermania.com/gmapkit/mapdb.php"
         ,btnname   : "ｲﾗｽﾄ"
         ,rect      : {x1:26,y1:11, x2:29, y2:13}
        };
var myMapType = new GMapKitMapType(map,opt);
myMapType.addMapType();


//マップタイプコントローラの追加
map.addControl(new GMapTypeControl());

      }
    }
 //]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>

サンプルプログラムの解説

自作のコントローラを地図に表示するコードは、上のサンプルプログラムの赤枠・青枠・緑枠で囲んだ部分です。

それぞれ１つずつ解説していきたいと思います。

【赤枠の部分】　Google Maps 活用講座拡張ライブラリの読み込み

Google Maps 活用講座では、誰でも簡単に地図をカスタマイズできるようにするためのライブラリを提供しています。

赤枠の部分ではこの拡張ライブラリを読み込んでいます。

使い方は非常に簡単で、Google Maps APIを読み込んでいる「<script src="http://maps.google.com・・・></script>」の直後に、次の宣言を追加してください。

<<Google Maps 活用講座拡張ライブラリの呼び出し>>

<script src="http://googlemaps.googlermania.com/gmapkit/api"></script>

これだけで、いろいろな機能が簡単に使えるようになります。
どんな機能があるのかは、おいおいと紹介していきます。

【青枠の部分】　イラスト地図の作成部分

イラストの地図はあらかじめ別途用意していただく必要があります。

青枠ではその用意したイラストの地図画像を、Google Maps から呼び出すための設定を行います。

//マップタイプを作成
var opt={
          debug     : 0
         ,minzoom   : 5
         ,maxzoom   : 5
         ,copyright : "(C)GoogleMaps活用講座"
         ,mapurl    : "http://googlemaps.googlermania.com/gmapkit/mapdb.php"
         ,btnname   : "ｲﾗｽﾄ"
         ,rect      : {x1:26,y1:11, x2:29, y2:13}
        };
var myMapType = new GMapKitMapType(map, opt);
myMapType.addMapType();

今回の主役は「GMapKitMapTypeコントロール」です。

GMapKitMapTypeコントロールは、Google Maps上に新しいマップタイプを作成してくれます。

　GMapKitMapType( GMap2, option)　

　　　GMap2：地図そのものを指定してください

　　　option：マップタイプを表示するための情報を指定します

　　　　　　　　　<<オプション一覧>>
　　　　　　　　　　　　　debug       : 　1のとき、地図上に(x,y,z)を重ねて表示します

                          minzoom   :   地図を表示する最小のズームレベル

                          maxzoom   : 地図を表示する最大のズームレベル

                          copyright    : 地図の右下に表示する著作権情報の表示です

                          mapurl        : 地図画像を返すURLをしています
                                                地図のタイル情報は mapurlに GETメソッドを用いて、次の形式でリクエストします

                                                      http://(mapurl)/?x=(x)&y=(y)&z=(z)

                                                      (x) は、タイルのx座標を示します
                                                      (y) は、タイルのy座標を示します
                                                      (z) は、地図のズームレベルを示します

                                                 mapurl は 256(px) x 256(px)の GIF形式、またはPNG形式の画像を返してください
                          btnname   :     マップタイプコントローラに表示するボタンのラベルを指定します

                          rect           :     地図を表示する範囲を指定します。
                                                  rectは次のような構造です。

                                                   {
                                                      x1 : (左上端のx座標)
                                                      ,y1 :  (同、y座標)
                                                      ,x2 : (右下端のx座標)
                                                      ,y2 :  (同、y座標)
                                                   }

　※Google Maps 活用講座拡張ライブラリ( gmapkit ver.1.05の仕様です)

GMapKitMapTypeコントロールは、Google Maps APIに地図の情報をどこのURLへリクエストするかを指示しているだけです。

Google Maps APIからは、地図の表示する位置に応じて、指定されたURLに情報を渡して、画像をリクエストします。

そのURLからGIF画像、またはPNG画像が返される事で、オリジナルの地図が表示されるようになるというわけです。

さてGoogle Maps APIから指定したURLに地図情報が渡されるわけですが、どの地点がどの座標なのか分からないと、イラストを用意しようがありません。

そこで、GMapKitMapTypeコントロールではデバッグモードを用意しました。

まずは、上記サンプルのdebugオプションを1にしてみてください。

debug=1のとき、地図上に(X座標・Y座標・Z座標) が表示されます

そうすると、地図上に地図画像(タイル)のX座標、Y座標、ズーム値が表示されるようになります。
これをもとにして、地図の画像を作成します。

最後にどうやってGoogle Maps APIに地図画像を返すか、ということですが、これは比較的に簡単です。

下記にサンプルPHPを用意しましたので、これを利用してください。

<?php
     $imgdir="img";

     //パラメータ取得
     $x = $_GET['x'];
     $y = $_GET['y'];
     $z = $_GET['z'];

     //画像ファイルがあれば返す、なければ作成して返す
     if(is_readable($imgdir."/".$x."_".$y.".gif")){
         header("Content-Type: image/gif");
         echo file_get_contents($imgdir."/".$x."_".$y.".gif");
     }else{
         $img=imagecreate(256,256);
         $bgcolor=imagecolorallocate($img,255,255,255);
         ImageColorTransparent($img, $bgcolor);
         $linecolor=imagecolorallocate($img,255,0,0);

         imagerectangle($img,0,0,255,255,$linecolor);
         imagestring($img,1, 5, 15, "($x, $y, $z)", $linecolor);

         //PNG画像の出力
         header("Content-Type: image/png");
         imagepng($img);
         imagedestroy($img);
}
?>

                                                地図画像を返すPHPプログラムのコード