GoogleMapAPIで住所からマーカーをプロットする方法

2010-10-31
このエントリーをはてなブックマークに追加
以前のGoogleMapはマーカーをプロットするに座標を指定しないといけなかったのですが、その座標を調べるのに困った記憶があります。会社のプロジェクトではランドマーク情報を買ったこともあります。
が、もはやそんなことはしなくていいのです。これはおどろきです。GoogleMapAPIで住所やランドマークから座標を調べてプロットすることが可能になりました。恐るべしGoogle。
2010.10.31 21:21
GoogleMapにマーカーをプロットするサンプルページ追加しました。確かにコードだけだと不親切ですよね。
サンプルページは自分で好きな場所にマーカーをプロットできるようにしてあります。

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>google.load(“jquery”, “1.3.2”);</script>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false&language=ja” charset=”UTF-8″></script>
<script type=”text/javascript”>
$(document).ready(function()
{
var map_block = document.getElementById(‘canvas’);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ ‘address’: “東急本店”}, function(results, status)
{
var map_options = {
zoom: 17,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map(map_block, map_options);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
});
});
});
</script>
</head>
<body>
<div id=”canvas” style=”width: 640px; height: 480px;”></div>
</body>
</html>

サンプルでは東急本店の座標を調べてそこを中心とした地図を表示、マーカーも打ってます。この例だと座標の取得にコケたら地図は表示されません。

まぁ、そこは地図の描画とマーカーのプロットを別の処理に分けてやればいいだけの話です。

地域情報サイトとか、作りやすくなりますよね。

こういうAPIを無料公開しちゃうあたり、Googleの恐ろしさを痛感します。日本の企業なら、確実に有料にするでしょう。

「リアルの情報までもネット上で整理するんだ」っていうGoogleの想いが伝わってきます。

jQueryを使ってjsonpでやりとりする

2009-02-19
このエントリーをはてなブックマークに追加

クライアント側のソース。今回のjQueryは1.3.1を利用しています。

$.ajax({
  url: ‘http://hogehoge.com/api/,
  dataType: ‘jsonp’,
  success: function(data)
  {
    成功時のコールバック関数
  }
});

hogehoge.com/api/に目的のAPIが置いてある前提です。そこにアクセスします。で、サーバ側のアクセスログを観ていると、実際にアクセスしてくるURIは

http://hogehoge.com/api/?callback=jsonp1235002429334&_=1235002440850

となっています。jQueryが付与しているんですかね。これは、結果は「jsonp1235002429334」というコールバック関数に渡してね、という意味合いのようです。クライアント側でコールバック関数の名前を指定していないのにちゃんと成功時のコールバック関数が呼ばれるのは、jQueryがこっそりと処理してくれていたからのようです。

で、サーバ側のレスポンスは

jsonp1235002429334({“address”:”東京都足立区大谷田”});

でOK。これは例として、郵便番号を投げると該当住所を返すapiです。値はクライアント側コールバック関数のdataに格納されます。住所にアクセスしたい場合は

data.address

で「東京都足立区大谷田」が返ってきます。jsonpを利用することでクロスドメインが可能になります。これで郵便番号から住所に変換、メールアドレスの正規表現チェック、等々の共通処理は一元管理できます。マスタが一箇所で済むのはメンテナンスも楽になります。

ただ、インターネット上に公開されているので、どこからアクセスがあるかわかりません。ホストで絞る、等の制限は必要かもしれませんね。

Tags: ,