ネットサービスの開発に役立ちそうな話題を中心にお届けします。
F.Ko-Jiの「一秒後は未来」 > Google Maps API > 日本の地名で簡単にジオコーディングできるライブラリ gmapper.js
2006年09月14日 01:24
1974日前に投稿

日本の地名で簡単にジオコーディングできるライブラリ gmapper.js

  • ... PV
  • このエントリーをはてなブックマークに追加

スポンサード リンク

地名指定で簡単にGoogleマップを表示できるライブラリです。2時間で作ったので性能はあまり高くありません。

gmapper.jsのサンプル

使い方

1. HTMLソースの<head>内に次のように記述します。

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript">
  <!--
   var key = "your google maps api key";
  -->
 </script>
 <script type="text/javascript" src="http://fkoji.com/js/gmapper.js"></script>
</head>

"your google maps api key"の部分には、ご自身のサイト用のAPIキーを記述してください。APIキーを代入する変数名は必ずkeyにしてください(まぁほんとはスクリプトの引数で渡したいけど)。その次にhttp://fkoji.com/js/gmapper.jsを読み込みます。

2. body内で次のように記述すると、地図を表示できます。

<body>
 <div id="map1" style="width:270px; height:270px;"></div>
 <div id="map2" style="width:200px; height:200px;"></div>
 <div id="map3"></div>
 <script type="text/javascript">
  <!--
   var gmapper = new GMapper();
   gmapper.show("map1", {q: "新宿"});
   gmapper.show("map2", {q: "新橋", zoom: 13, control: "n"});
   gmapper.show("map3", {q: "竹橋", width: 270, height: 270, control: "s", marker: "on"});
  -->
 </script>
</body>

GMapperクラスには今のところshowメソッドしかありません。showメソッドの引数は、地図を表示するHTML要素のidと、オプションです。オプションにはオブジェクトを与えます。オプションの項目は今のところ以下の通り。

  • q(必須): 地名
  • zoom: 地図のズームレベル(最小値0、最大値17)。与えられない場合は15。
  • width: 地図の幅。与えない場合は必ずstyleで指定しておく。
  • height: 地図の高さ。与えない場合は必ずstyleで指定しておく。
  • control: 地図の左部分に配置するコントローラ。
    n: 配置しない
    s: GSmallMapControl()を配置
    その他: GLargeMapControl()を配置
  • marker: 地図の中心点にマーカーを配置するか。
    on: 配置する。吹き出し内にはqで与えた文字列が入る。
    その他: 配置しない。

バグありありなので、バグが出ないように優しく使ってください。

gmapper.jsのサンプル

スポンサード リンク

Written by
関連エントリーはこちら
お探しの情報が見つからない場合はサイト内検索もお試しください。
Meity.jp - 「DM送りたいのでフォローしてください」とかめんどくさくないですか？


トラックバック

このエントリーのトラックバックURL:

この一覧は、次のエントリーを参照しています: 日本の地名で簡単にジオコーディングできるライブラリ gmapper.js:

» gmapper.js ver.0.2 from F.Ko-Jiの「一秒後は未来」
gmapper.jsに、「ある地点から東にxメートル北にyメートル離れた地点を表示する」というオプションを指定できるようにしました。 gmapper.sh... [詳しくはこちら]

トラックバック時刻: 2006年09月14日 23:56

» gmapper.js ver.0.2.1 from F.Ko-Jiの「一秒後は未来」
コンストラクタの引数にGMap2クラスのオブジェクトを与えられるようにしました。これによってGoogle Mpas APIで実装済みの地図に簡単にジオコー... [詳しくはこちら]

トラックバック時刻: 2006年09月19日 01:43

» javascript + perl - 住所でGoogle MapにアクセスするHack from 404 Blog Not Found
+ これとこれがそろえば、ここまで来るのは時間の問題というものです。 [詳しくはこちら]

トラックバック時刻: 2006年09月27日 12:36

» 地図、都道府県の地図、駅近くの地図 from グーグル地図！！
グーグル地図の使い方は簡単です！！ [詳しくはこちら]

トラックバック時刻: 2006年11月01日 16:26

Google Maps API

English version

2006/09/14 01:24:52 by F.Ko-Ji
コメント (0) トラックバック (4) Google Maps API

前のエントリー: « 「たまに来ますのでよろしくお願いします」
次のエントリー: ある地点から東に⊿xメートル、北に⊿yメートル離れた地点の緯度・経度を求める方法 »

コピペにご利用ください。

タイトル:

URL:

リンク用HTMLタグ: