Google Static Maps APIについて

この記事では、静的マップGoogle Static Maps APIの一般的に使用される関数、APIの呼び出し方法、および静的マップAPIを使用した開発の実例を説明します。

Google Static Maps API の概要

Google Mapsは強力な地図呼び出し関数を提供しますが、一般的なユーザーにとって、Google Mapsが提供するさまざまな機能をうまく利用するには、少なくとも特定のJavaScript構文が必要です。

ただし、一部のユーザーは、静的な地図図をサイトに埋め込むだけでいいであり、Google Mapsが提供するズームやドラッグなどのAjax機能は必要ありません。したがって、これらのユーザーにとっては、JavaScriptコードを記述せずに静的マップをサイトに埋め込むことができるGoogle Static Maps API が最優先の選択です。

静的マップAPIは、ユーザーがGoogle Mapsによって提供されるマップイメージを呼び出すのを非常に容易にします。Googleマップは、静的マップの補助ジェネレーターもユーザーに提供し、(http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html)ユーザーが動的スクリプトを使用せずに必要の静的マップイメージをカスタマイズできるようにします。

補助ジェネレーターでは、アドレスデコードを通じて必要な地図の場所を見つけ、ズームスケール、画像サイズ、地図の種類、マーカーポイントの場所、静的な地図画像に表示されるサイズ、色、文字を定義できます。設定した後、ユーザーがカスタマイズした静的な地図画像がリアルタイムで更新され、画像のプレビューと画像呼び出しのURLアドレスが表示されます。ユーザーが住所をコピーした後、必要な地図画像をページに簡単に埋め込んで表示することができます。

現在、静的マップは、地域の地図(Map)、衛星画像(Satellite)、ハイブリッドモード(Hybrid)、地形マップ(Terrain)など、Google Mapsが提供させている4種類のマップをサポートしています。
例えば、検索ボックスに「Tokyo」と入力して、東京の静的マップを呼び出します。パスを設定する必要がある場合は、マップをクリックして、表示する必要のあるパスを作ることもできます。

次には、返される画像のサイズを500*300に設定し、マーカーにオレンジを使用して、文字Aを表示します。設定した後、下記のブラウザウィンドウの図に対応する静的な地図画像を取得できます。

Google Mapsの静的地図画像を呼び出すには、地図のAPI_Keyも申請する必要があることに注意してください。申請先の住所はhttp://code.google.com/apis/maps/signup.htmlです。API_Keyと同様に、Googleマップを使用するための認証コードは、ユーザーが適用したAPI_Keyを入力した後、先ほど呼び出した静的マップイメージに対応するアクセスアドレスは次のとおりです。

http://maps.google.com/staticmap?center=39.908173,116.397947&markers=39.908173,116.3
97947,orangea&zoom=13&size=500×300&key=YOUR_KEY_HERE

静的地図のAPIを呼び出すことで、電子地図の適用範囲をさらに広げることができると同時に、地図画像の取得方法がより簡潔でわかりやすくなります。

Google Static Maps API構文形式

Google Static Maps APIの常用のパラメータ

Google Static Mapsの画像はすべて特定のURLアドレスを介して返されます。URLリクエストでは、ユーザーはリクエストされた場所、マップのサイズ、ズームレベル、マップの種類、マーカー設定を指定できます。

常用のGoogle Static Mapsのリクエストアドレス文字列は次のように表すことができます。

http://maps.google.com/staticmap?center=緯度と経度&markers=緯度と経度、色&zoom=ズームレベル&size=サイズ&key=アプリケーションのキー(key)値

マップイメージリクエストは標準のHTTPで送信されるため、すべてのパラメータで間隔として&文字を使用する必要があり、一部のパラメータはオプションです。 アドレス文字列に添付されているパラメータとその値は次のとおりです:

  • Center:地図の中央にアイコンが表示されない場合は、centを使用して地図の中心を定義する必要があり、それに続く緯度と経度はコンマで区切る必要があります。
  • Zoom:マップのズームレベルを定義するために使用されます。0から19までのズームレベルを数字で選択できます。
  • Size:マップ画像のサイズを定義するために使用され、それぞれ水平ピクセルと垂直ピクセルで表されます。
  • Format(オプション):生成される画像形式を定義します。デフォルトでは、静的マップAPIはGIF形式の画像を生成します。その他のオプションの形式はJPEGとPNGです。比較的には、GIFおよびPNG形式にはより多くの画像の詳細が含まれていますが、JPEG形式の方が圧縮率が高くなっています。
  • Maptype(オプション):選択できるマップの種類には、衛星画像、地形図、ハイブリッドマップ、およびポータブルデバイスに適したマップが含まれます。デフォルトでは、通常の道路案内図を取得します。
  • Markers(オプション):マップレイヤーにアタッチされた1つ以上の場所マーカーを定義するために使用されます。マーカーはマーカーセパレーター( | )を使用して分割できます。
  • Path(オプション):2つ以上のポイントをリンクして、マップに表示される道路パスを定義します。同様に、一連のポイントもマーカー( | )で区切られます。
  • Frame(オプション):返された地図画像にカラーセットの境界線を追加します。
  • Key::サイトに適用されているGoogle Maps API認証コードを入力します。このAPI Keyは、Google Mapsを使用する場合の認証コードと同じです。Googleデベロッパーサイトから無料で申請できます。

Google Static Maps APIを使用する場合、現在のGoogle Static Maps APIクエリ呼び出しの制限は1日あたり1000リクエストであることに注意する必要があります。この設定は、ユーザーが他の目的で多数の静的マップ画像を取得することを制限するためのものです。 APIを悪用して静止画像を取得するサイトが発見された場合、Googleはサイトマップ画像リクエストへの応答を一時停止する場合があります。

Google Static Maps APIのサポートサービス

Google Static Maps APIを使用して地図画像を取得する場合、要求された場所の住所しかわからないことが多く、緯度と経度の情報はわかりません。この場合、Googleが提供させた住所デコード(Geocoding)サービスを使用できます。Googleユーザーが入力した住所を対応する緯度と経度の座標に変換します。

Google Maps APIには住所デコード機能が含まれており、ユーザーはHTTPリクエストでGClientGeocoderオブジェクトを呼び出して、住所デコード操作を完了することができます。

Googleが提供する公式の実例の中には
(http://code.google.com/apis/maps/documentation/examples/geocoding-simple.html)、以下のコードスニペットを使用して、入力場所名の住所デコード操作を完了することができます。最初にGMap2を渡します。クラスは新しいマップを生成し、GClientGeocoderクラスを使用してジオコーダーのインスタンスを作成し、Googleサーバーとの接続を確立して住所デコード変換を取得します。 現在、アメリカでは、町レベルの住所変換をサポートできます。

  function initialize() { 

      if (GBrowserIsCompatible()) {  

          map = new GMap2(document.getElementById("map_canvas")); 
          map.setCenter(new GLatLng(37.4419, -122.1419), 13); 

          geocoder =  new GClientGeocoder(); 
      }  

  }  

以下のshowAddress関数では、geocoderから返された結果に対応する緯度と経度を取得し、取得した緯度と経度を判定した後に地図にマークします。

        function showAddress(address) {  
            if (geocoder) {  

                geocoder.getLatLng(  

                    address,  

                    function(point) {  

                        if (!point) {  

                            alert(address + " not found");  

                        } else {  

                            map.setCenter(point, 13);  

                            var marker = new GMarker(point);  

                            map.addOverlay(marker);  

                            marker.openInfoWindowHtml(address);  

                        }  

                    }  

                );  

            }  

        } 

住所から取得した緯度と経度をコードに変換した後、取得した緯度と経度に応じて地図表示の中心位置を設定し、ポイントのマーキングなどを行うことができます。

もちろん、コード内でGClientGeocoderクラスを呼び出して住所デコードの機能を実現したくない場合は、ブラウザのURLによって送信されたHTTPリクエストで住所デコードを直接取得することもできます。

URLで住所デコードを実現するには、次の住所にリクエストを送信するだけでいいです。

次には、対応するブラウザリクエストパラメータを追加します。常用のリクエストパラメータは次のとおりです。

  • q(必須)— デコードされる住所の文字列が続きます。
  • Key(必須)— 申請されたGoogle API 認証コードです。
  • output(必須)— 生成された出力ファイルの形式であり、オプションの形式はjson(デフォルト)、xml、kml、csvです。
  • gl(オプション)— 国のコードを指定するために使用できます。

例えば、リクエストして取得したGoogle本社の緯度と経度の場所は次のとおりです。

http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&outp
ut=xml&key=

現在取得している出力形式はXMLドキュメントの形式であり、コードは次のとおりです。

<?xml version="1.0" encoding="UTF-8" ?>    
<kml xmlns="http://earth.google.com/kml/2.0"> 
<Response> 
      <name>1600 Amphitheatre Parkway, Mountain View, CA</name>    
<Status> 
   <code>200</code>    
   <request>geocode</request>    
  </Status> 
<Placemark id="p1"> 
   <address>1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA</address>    
  <AddressDetails Accuracy="8" xmlns="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0"> 
<Country> 
   <CountryNameCode>US</CountryNameCode>    
<AdministrativeArea> 
   <AdministrativeAreaName>CA</AdministrativeAreaName>    
<Locality> 
   <LocalityName>Mountain View</LocalityName>    
<Thoroughfare> 
   <ThoroughfareName>1600 Amphitheatre Pkwy</ThoroughfareName>    
   </Thoroughfare> 
<PostalCode> 
   <PostalCodeNumber>94043</PostalCodeNumber>    
   </PostalCode> 
   </Locality> 
   </AdministrativeArea> 
   </Country> 
   </AddressDetails> 
<Point> 
   <coordinates>-122.085121,37.423088,0</coordinates>    
   </Point> 
   </Placemark> 
   </Response> 
   </kml>

出力形式が指定されていない場合、コンテンツはデフォルトのJSON形式で出力されます。上記のコンテンツがJSON形式で出力された後、JSON整形ツール(https://www.ceodata.com/tools/json.php)を使用し、効果を確認します。

さらに、Google Mapsが提供するサービスには、XMLおよびデータ分析サービス、Flashによって町の地図を表示する実例、Google Earthブラウザプラグインのサポートも含まれます。詳細については、Google Mapsがサービスを提供したページを参照してください。

http://code.google.com/apis/maps/documentation/services.html

RubyとRailsを使用してマップMashupアプリケーションを開発する場合は、StaticGmaps(http://static-gmaps.rubyforge.org/)と呼ばれるgemsパッケージを使用できます。Google Static Maps APIのRubyアクセスインターフェースを提供し、ユーザーの開発プロセスでの作業量が簡素化できます。

Google Static Maps APIの実例

開発環境の概要

Google Static Maps APIの関数の使い方を理解してから、静的マップを呼び出すことができる小さなプログラムの作成を始めましょう。アプリケーションによって実装される関数は次のとおりです。

  • 最初に、入力ボックス、確認ボタン、および静的マップ画像表示パネルを含むアプリケーションプログラムインターフェイスを設計する必要があります。
  • アプリケーションが起動した後、ユーザーはテキストボックスに検索する場所の名前を入力し、[OK]ボタンをクリックした後、静的マップのURL要求文字列を組み合わせて、要求された静的マップ画像を取得し、フォームに表示し、画像をプログラムの現在の位置に保存します。

次には、Goolge Static Mapsに埋め込まれたアプリケーションがどのように実装されているかをご覧ください。

新しいテクノロジーを試し、アプリケーションの面白さを保つために、ここではPython言語、PyQtグラフィックライブラリ、およびNetBeans IDEのNBPythonプログラミング環境を使用して、静的マップを呼び出す実例を完成します。

Python言語とQtグラフィックライブラリを使用して開発されたアプリケーションには、クロスプラットフォーム機能があります。ここでは、Windows開発環境を使用します。開発に使用されるソフトウェア環境は、次のように設定されています。

  • NBPython Milestone 6
    https://nbpython.dev.java.net/
  • Python 2.5.2 Windows installer
    http://www.python.org
  • PyQt(PyQt-Py2.5-gpl-4.4.3-1.exe)
    http://www.riverbankcomputing.co.uk/

始める前に、プログラムで使用されるQtとPyQtグラフィックライブラリを簡単に説明します。 Qtは成熟した安定したGUIツールボックスです。Qtクロスプラットフォームグラフィックライブラリは、Windows、Linux、Mac OSX、およびさまざまなポータブルデバイスプラットフォームで実行できます。 Googleの有名なGoogle EarthアプリケーションのインターフェースもQtグラフィックライブラリを使用して設計されており、Linux、Windows、Macプラットフォーム用にさまざまなバージョンがリリースされています。

Qtは、優れたオブジェクト指向構造と多くの便利なAPIを使用して設計されています。 PyQtは、PythonプログラマーがQtグラフィックライブラリに基づいてクロスプラットフォームアプリケーションを開発するためのブリッジを構築します。

Pythonで使用されるデフォルトのグラフィックライブラリTk(Tkinterによってバインドされる)と比較して、PyQtには多くのメリットがあります。例えば、Qtはシグナル/スロット(signals/slots)を使用して、ウィジェット(および他のオブジェクト)間でイベントを転送します。メッセージにより、コードスニペットを非常に簡単に記述できます。イベントによってトリガーされます。また、PyQtには300を超えるクラスと、6000近くの関数とメソッドが含まれており、非常に強力です。

PyQtのインストールは比較的複雑で、通常はソースコードをダウンロードしてマシン上でバイナリコードにコンパイルする必要があります。Linux環境ではコンパイルプロセスでエラーが発生する可能性は低いですが、多くの場合必要になります。 Windows環境でコンパイルする場合はさらに多くなります。コンパイルして渡すため、数回に試す必要があります。

環境構築に関してあまり心配する必要はありません。ここでは、Pythonパーサーをインストールする必要があることを除いて、PyQtが提供するコンパイル済みのバイナリインストールバージョンPyQt-Py2.5-gpl-4.4.3-1.exeを使用します。さらに、このバージョンには、PyQtを使用したアプリケーション開発に必要なすべての要素が含まれています。 主な項目は次のとおりです。

  • PyQtライブラリ
  • Qtライブラリ
  • Qt Designer(インターフェースデザイナー)
  • Qt Assistant(プログラミングアシスタント)
  • Qt Linguist(国際化された翻訳ツール)
  • pyuic4(uiインターフェースファイル用のコンパイラ)
  • QScintilla(ScintillaエディタークラスのQtインターフェース)

プログラミング環境はNetBeansのPython IDEを使用します。NBPythonはプラグインとしてNetBeans環境に追加できます。46MBのNetbeans Python専用IDEを個別にダウンロードすることもできます。このIDEでは、追加される予定のPythonサポート機能は次のとおりです。

  • 構文の強調表示
  • コード補完
  • PythonとJythonのサポート
  • PyUnitユニットテストのサポート
  • Pythonコードブレークポイントのデバッグ
  • Pythonライブラリ管理
  • Pythonコンソール
  • Pythonスクリプトの実行
  • Pythonバージョン管理

NetBeansのPython IDEは、異なるプラットフォームでのインストールバージョンも提供します。Windows環境での操作を以下の図に示します。

クロスプラットフォームのGUIアプリケーション開発にQtを使用するメリットの1つは、便利なQtインターフェイスデザイナです。Qt Designerを使用すると、美しいプログラムフォームレイアウトをすばやく設計できます。

次に、Qt Designerを開き、新しいダイアログボックスを作成してから、Addressという名前のLableラベル(QLable)、テキスト入力ボックス(QLineEdit)、および[OK]ボタン(QPushButton)をダイアログボックスの本体に追加します。アプリケーションウィンドウ、Googleから取得した静的マップを表示するためのLabelタグも追加します。次に、グリッドレイアウト(Grid Layout)を使用して、各コンポーネントの位置を調整します。 設計した後のダイアログボックスは以下の図のようになります。

Qt Designerを使用している場合、いつでも[フォーム-プレビュー](Ctrl + R)をクリックして、現在のフォームをプレビューすることもできます。 フォームのプレビューを以下の図に示します。

Qt Designerのプレビューデザインフォーム

保存した後、Qt Designerは拡張子が.uiのファイルを生成しました。 Qtでは、UIファイルはQt Designerによって生成されたインターフェイスの関連コンテンツをXML形式で記録します。UIファイルに含まれるコンテンツは次のとおりです。

  • Widget属性、含まれる要素(ボタン、テキストボックス、ドロップダウンリストなど)、レイアウトレイアウトメソッド、およびその他の関連属性。
  • 参照のヘッダーファイル(C++を使用して、ヘッダーファイルがコンパイルされます);
  • 変数;
  • スロット(Slot);
  • 関数;

UIファイルを保存した後、Qtが提供するUIC(user interface compiler)コンパイラを使用して、UIファイルのコンテンツを標準の.hファイルと.cppファイルに変換できます。PyQtでは、UIファイルは.pyファイルに変換されます。
UI 文 件 编 译 器 位 于 PyQt 的 安 装 目 录 ( Windows 环 境 下 , 通 常 是 C:\Python25\Lib\site-packages\PyQt4)中,在终端模式的命令行提示符下,使用目录中的pyuic4.bat 命令即可将UI 文件编译为Python 的代码。使用方法如下:
UIファイルコンパイラは、PyQtのインストールディレクトリ(Windows環境:C:\Python25\Lib\site-packages\PyQt4)にあります。ターミナルモードのコマンドラインプロンプトで、ディレクトリにあるpyuic4.batコマンドを使用して、UIファイルはPythonコードにコンパイルできます。使用方法は以下のとおりです。

pyuic4.bat UI_FILE -o PY_FILE

(UI_FILEはUIファイルのパスであり、PY_FILEは生成されるPythonファイルのパスです。例えば、ui_myapp.pyという名前を使用して、生成されたPythonファイルに名前を付けることができます)。 さらに、pyuic4コマンドの後に、パラメータを追加し使用できます。パラメータ-p(–preview)は、コードファイルを生成せずに、変換後にUIファイルのプレビューを生成します。パラメータ-x(–execute)は、テストを生成し、クラスの追加コードを表示するために使用されます。パラメータ-d(–debug)は、デバッグ出力を表示するために使用されます。

UIによって生成されたPythonコードにui_staticmap.pyという名前を付けてから、NetBeansで新しいプロジェクトを作成して、設計したフォームにイベントコードを追加します。

NetBeans Python IDEをインストールした後、次の図に示すように、最初にメニューの[Tools]—[Python Platforms]でPythonインタープリターのパスを設定する必要があります。

Share

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です