2008/3/4 火曜日

最寄り駅Webサービス

このエントリをはてなブックマークに追加���絲����薈�Web��泣�若����垢里呂討淵屮奪�マーク被リンク数
Filed under： googlemap — akky @ 23:46:57

緯度経度や住所から最寄駅を教えてくれるAPIサービス
http://map.simpleapi.net/

指定した位置からの直線距離も教えてくれる。
目的とする位置の緯度/経度はわからないので、これは駅名から緯度経度に変換すればいいのかな。
駅の緯度/経度がわかればマーカーなりは表示できるし。

2007/9/19 水曜日

DragZoomControlからインスパイァーを受ける

このエントリをはてなブックマークに追加DragZoomControl��������ゃ�潟�鴻����ゃ�＜�若�����������のはてなブックマーク被リンク数
Filed under： googlemap — akky @ 0:26:45

GoogleMapを使っているサービスのブラウザ上ので座標から緯度/経度に変換する方法を探してネットの海をさまよっているうちに
http://nyanjiro.no-blog.jp/web20/2007/06/dragzoomcontrol_32db.html
でDragZoomControlというのを見つけた。選択開始コマンドのボタンを押すとGooleMapを描画しているDivタグの上に別レイヤーを重ねて画面上で範囲を決め、その範囲が収まるズームに変更してくれるAPI。

直接、このAPIを使うことはしないのだけど実現方法はなるほどね。と関心させられた。選択開始コマンドのボタンを押すと、GooleMapの上に、divタグを重ね合わせて半透明にしておく。このときは４つのdivタグを作っておいて、マウスで選択している範囲（最初にマウスをクリックした位置から、現在のマウスの位置）が中抜けになるように４つのdivタグの大きさと位置を調整する。そうすることで、半透明になっていない部分が選択範囲として見せることが出来る。ズーム後には表示されないので半透明にした部分は網掛けに見えるので、「ここは表示されないよ」という意味をもたせられる。

(　･∀･)つ〃∩ ﾍｪｰﾍｪｰﾍｪｰ

2007/8/23 木曜日

GoogleMapを使って住所から緯度と経度を求める

このエントリをはてなブックマークに追加GoogleMap���篏帥�ｃ��篏����������膩�綺����腟�綺����羆�������のはてなブックマーク被リンク数
Filed under： googlemap — akky @ 19:29:03

Google Maps API を使って地名もしくは住所から緯度経度を求めるには
GClientGeocoder のgetLatLng(address, callback）メソッドを使うと
GLatLang　が返却される。これから緯度と経度をそれぞれ取得すればよい。

参考：http://blog.fkoji.com/2006/06142213.html

下がためしに作成したソースです。
左上のテキストボックスに地名もしくは住所を入力して得られた緯度/経度を中心にします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>緯度経度お試し</title>

<script xsrc="http://maps.google.com/maps?file=api&v=2.x&key=YouKey" mce_src="http://maps.google.com/maps?file=api&v=2.x&key=YouKey"  type="text/javascript"></script>

<script xsrc="http://www.google.com/jsapi" mce_src="http://www.google.com/jsapi"  type="text/javascript"></script>

<script language="Javascript" type="text/javascript">

//<![CDATA[

var geocode = new GClientGeocoder();

var map;

var centerMarker;

var centerPoint;

/*

* bodyをロード後にGooleMapの地図を表示

*/

function load() {

centerPoint        = new GLatLng(35.675888, 139.744858);

//地図のインスタンスを生成します

map = new GMap2(document.getElementById("map"));

// 中心値に移動

map.setCenter(centerPoint, 17);

// 値にマーカーを表示

centerMarker = new GMarker(centerPoint);

map.addOverlay(centerMarker);

// パン移動とスライダーズームの使える大きなコントロール

map.addControl(new GLargeMapControl());

} /*

* 住所から緯度経度を求めてGoogleMapに反映

*/

function localsearch(){

// 入力された住所の住所の一覧を取得

var address=document.getElementsByName("target_address").item(0).value;

// GClientGeocoder を使って緯度/経度を求める

geocode.getLatLng(address, function(point){

if(point != null ){

// 取得できた緯度、経度を取り出す

var lat = point.lat();

var lng = point.lng();

var msg = "lat=" + lat + " lng=" + lng;

document.getElementById("result").innerHTML = msg;

// GooelMapの中心を取得した緯度経度に移動

centerPoint = point;

map.setCenter(centerPoint);

// マーカーを新しい中心緯度経度に作り変え

if ( centerMarker != null ){

map.removeOverlay(centerMarker);

centerMarker = new GMarker(centerPoint);

map.addOverlay(centerMarker);

}

}else{

alert("「" + address + "」の緯度経度を取得できませんでした");

}

}

);

}


//]]>

</script>

</head>

<body onload="load()">

<input type="textarea" id="target_address" name="target_address" value="国会議事堂"><input type="button" name="exec" value="検索" onClick="localsearch()">

<div id="result">ここに求めた緯度経度</div>

<div id="map" style="width: 480px; height: 320px;"></div>

</body>

</html>
— 次のページ »