F.Ko-Jiの「一秒後は未来」

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

地名指定で簡単に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のサンプル

コメントを残す

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

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など