*Google Maps APIを用いたプログラミング [#rb27f598]
Google Mapsが出て大分たち、Google Earthも知名度が上がってきているようです。
ただ利用するだけでも大変おもしろいですが、この素晴らしいGoogle Mapsのリソースを使って自由のお好みマップが作れるAPI、使うっきゃありません。
情報が古いので削除しました

ということで筆者は[[ゲーセンマップ:http://starlancer.org/~riesz/gcmap/gcmap/]]なんてものを作ってみたわけですが、作成時に理解したことなどをメモってみました。参考にしていただければ幸いです。

-目次
--準備とサンプル実行(このページ)
--[[Google/Google Maps API/マーカーの追加]]
---マーカーの追加、吹き出しの表示など
--[[Google/Google Maps API/XMLデータの読み込み]]
---外部データの読み込み、外部プログラムとの連携など

*準備とサンプル実行 [#v63bd59e]
**準備(API keyの取得) [#g6646865]
Google Maps APIはSign Upしてキーを取得しなければ設置することができないので、まず、[[公式サイト:http://www.google.com/apis/maps/]]にいって「Sign up for a Google Maps API key」からキーを登録します(Googleのアカウントも必要です)。

Terms and conditionsを読んだら「I have read and agree with the API terms and conditions 」にチェックをいれ、設置するURLを記入して「Generate API Key」を押しましょう。このときGoogle Accountにまだログインしていない場合、いったんログイン画面に移ります。

すると以下のようにキー
 Thank you for signing up for a Google Maps API key. Your key is:
 
 ABQIAAAAFf1HayfchE-FBTnNsH1kyBT2wtinEMry53Qb8iZK3V9hU0FeBxQ8kFoydUYzhSUdjOJbdPmEV5B7OA

と設置許可されるアドレス

 This key is good for all URLs in this directory:
 
 http://www.starlancer.org/~riesz/gcmap/gcmap/

およびサンプルコードを含んだHTMLソース

 <!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>
     <script src="http://maps.google.com/...(長いので省略)" type="text/javascript"></script>
   </head>
   <body>
     <div id="map" style="width: 500px; height: 400px"></div>
     <script type="text/javascript">
     //<![CDATA[
     
     var map = new GMap(document.getElementById("map"));
     map.addControl(new GSmallMapControl());
     map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
     
     //]]>
     </script>
   </body>
 </html>

が表示されます。

このキーはGoogle Maps APIを用いて作成するアプリケーションを設置するURL1つ1つに対応して取得・設定しなければなりません。

**サンプルの実行 [#w4dcca7c]
まずはサンプルを設置してみましょう。登録したURLに正しく設置すればGoogle Mapsが表示されるはずです。

コードを解説すると
 <script src="〜
の部分がGoogle Maps APIの本体を読み込む部分。

 <div id="map" style="width: 500px; height: 400px"></div>
がGoogle Mapsが表示される領域で

 <script type="text/javascript">
 //<![CDATA[
から

 //]]>
 </script>
までがユーザがAPIを利用して記述するプログラムです。

***ユーザのプログラム部分 [#d99a0350]
まず、[[GMap:http://www.google.com/apis/maps/documentation/#GMap_code_]]を用いてGMapクラスのオブジェクトを作成します。このときcontainer引数に指定したHTML要素にGoogle Mapsが表示されます。
 var map = new GMap(document.getElementById("map"));
サンプルでは先ほどもうけられていた、idがmapのdiv要素を取得して第1引数として渡しています。

次に、addControlメソッドを用いてコントロール(縮尺変更バーや衛星/マップ変更用ボタン等)を設置しています。[[ここ:http://www.google.com/apis/maps/documentation/#Controls_overview]]に示されているいずれかが利用可能です
 map.addControl(new GSmallMapControl());
サンプルではGSmallMapControlを用いています。

最後に、centerAndZoomメソッドで初期位置を設定しています。
 map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
第1引数にはGPointオブジェクトを用いて緯度・経度を渡します。第2引数はズームレベルです。

コードはここ -> https://github.com/rieszgithub/gcmap

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS