F.Ko-Jiの「一秒後は未来」ではウェブやSEO、API、RSSといった技術的ネタから、ちょっとした豆知識や梅酒、エンタメ系まで様々な情報を不定期にお届けしています。

F.Ko-Jiの「一秒後は未来」 > Google Maps API > 日本の地名で簡単にジオコーディングできるライブラリ gmapper.js

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

2006/09/14 01:24:52

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

使い方

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のサンプル