日本の地名で簡単にジオコーディングできるライブラリ gmapper.js [2006-09-14 01:24:52]
地名指定で簡単に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で与えた文字列が入る。
その他: 配置しない。
前の記事
次の記事
トップページ
[PR]美味しい梅酒が見つかるサイト