2010年2月26日金曜日
ブラウザの違い

いやはや、ハマった。
とりあえずGoogle Maps API v3のテストをしてて、時間があるのでCSSでテストページの見栄えを整えていたら…

その1 何故か、Google Chromeに値がPOSTされない!

ヴァージョンは4.0.249.89。
IEとFirefoxは問題なかったんだけど、何故かchromeだけ$_POSTが空。
で、フォームの値をalert()してやるとダイアログには値が出てくる。
<html>に「xmlns="http://www.w3.org/1999/xhtml"」が指定してあったんだけど(コピペしてきたヤツを元にしているので。僕だったら入れない)、これを削除したら正常に動いた。
「え? これが原因?」と思って「xmlns」を戻したら、正常に値が送られた。
原因はこれじゃないってこと??
ますます判らん。


その2 FirefoxにはinnerText()が使えない。

知るかよ!ってカンジだ。


それだけ。
忘れないようにメモ(とくにその2ね)。
その1は…なんだったんだろう??



0 コメント | コメントを書く | コメントの表示
ルート表示の困った - Google Maps API v3

指定した地点から、指定した距離(km)離れている施設の検索は出来るようになった。
機能的には不要だが、ルート表示をしてみようと思い、サンプルを参考にやってみた。

http://code.google.com/intl/ja/apis/maps/documentation/v3/examples/directions-simple.html

ただこれ、ルートだけじゃなくて、開始位置とゴールにマーカーを置くんだよね。
検索結果として表示している地図には、既にマーカーが置かれてる。だからいちいちAとBのマーカーが置かれると困るんだ。
まぁ、検索範囲の中央を示す地点には(いまのところ)なにも置いてないのでAのマーカーは我慢しようじゃないか。
しかし、ゴールのBのマーカーはいらん!

解決策はないものか?



0 コメント | コメントを書く | コメントの表示
2010年2月24日水曜日
Google Maps API v3で円を描いてみる

郵便番号(三桁、四桁別々)と半径(キロメートル)を入力して、ボタンを押下すると、地図上に円を描くようにしてみる。
忘れないように、とりあえずfunctionだけ書いておく。
JavaScriptは始めたばかりなので、スマートかどうかは自信がない。

参考にしたのはここ。
Circle Object - Google Maps API V3 Reference - Google Maps JavaScript API V3 - Google Code
Maps API V3 Overlays (Google Maps API Version3 日本語ドキュメント(非公式))

Google Maps API V3 Demo Gallery - Google Maps JavaScript API V3 - Google Code
このページにリンクがはってるこのデモが一番参考になるのかな?
Circle Overlay
Drag the marker to move the circle


入力チェックをしてないので、注意すること。
一応、Version3で検証。

var map;
var circle;
// onloadは割愛
function drawCircle(){
// 我ながら値の取得方法については不細工だなぁと
var zip1 = document.getElementsByName('zip1')[0].value;
var zip2 = document.getElementsByName('zip2')[0].value;
var zipcode = zip1 + "-" + zip2;
// Circle Overlayのサンプルに3000kmを3000000と指定していた
// リファレンスを見たら、単位はメートルだったね
var radi = document.getElementsByName('radi')[0].value * 1000;
// 色の指定はテキトー
var circleColor = "#00AAFF";

// 指定された郵便番号から緯度経度を取得する
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: zipcode}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// 地図を移動させる
map.setCenter(results[0].geometry.location);
map.setZoom(10);
// 再描画の場合は、一旦前の円を消す
if(circle){
circle.setMap(null);
}
// 円の設定
circle = new google.maps.Circle({
fillColor: circleColor
, strokeWeight: 1
, radius: radi
, center: results[0].geometry.location
});
// 円の描画
circle.setMap(map);
} else {
alert(zipcode + ' not found');
}
});
}


new Circle()するところで、参考にしたデモのソースが「map: map」とかしてたんで何も考えずにそうやってたら、再描画が上手くいかなかった。

とりあえず指定した郵便番号を中心とした円を描いてくれる。新しく郵便番号を入れて実行すれば前のを消して、新しい円を描いてくれる…はず。



0 コメント | コメントを書く | コメントの表示
2010年2月22日月曜日
version3はこっちか

すぐさま更新!

Creating a Store Locator with PHP, MySQL & Google Maps - Google Maps API - Google Code
http://code.google.com/intl/ja/apis/maps/articles/phpsqlsearch_v3.html


version3用はこのページだったね。
HTMLを入れ替えたら動いた。



0 コメント | コメントを書く | コメントの表示
PHPとMySQLで地点検索 - Google Maps API

色々調べてみると、なんか面倒な雰囲気で、さっそく挫折しそう。

Creating a Store Locator with PHP, MySQL & Google Maps - Google Maps API - Google Code
http://code.google.com/intl/ja/apis/maps/articles/phpsqlsearch.html


ググってて出てきたのが上のサイト。ま、Googleからの情報ですけど。

PHPとMySQLでっていうのはいいね。
見てみると、緯度経度をそれぞれFLOATで持つんだね。

CREATE TABLE `markers` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 60 ) NOT NULL ,
`address` VARCHAR( 80 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`lng` FLOAT( 10, 6 ) NOT NULL
) ENGINE = MYISAM ;


で、ある地点(の緯度経度)から距離を出して、指定した半径(キロメートルorマイル)内のものをピックアップするというSQLがこれ。
SELECT id, ( 3959 * acos( cos( radians(37) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(-122) ) + sin( radians(37) ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < 25 ORDER BY distance LIMIT 0 , 20;

実際にPHPでやると、こう。
$query = sprintf("SELECT address, name, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20",
mysql_real_escape_string($center_lat),
mysql_real_escape_string($center_lng),
mysql_real_escape_string($center_lat),
mysql_real_escape_string($radius));
$result = mysql_query($query);


この場合25マイル未満ってこと。ちなみにキロメートルでやるなら3959を6371に置き換えること。

中心となる地点はJavaScriptで取得して、GETでパラメタを送るようだ。

実際に使う場合は画面遷移も必要だし、POSTするだろうから、随分変更点が出てきそう。
とはいえ、緯度経度をFLOATで持っててもOKなら、SQLiteでもなんとかならんかな?


忘れないように、ここにメモしておこう。


メモだけじゃなく、実際にやってみた。
とりあえずコピペして動くかどうかテスト。

環境はXAMPP Lite Windows版で、version 1.7.1。古いのかどうか判りません。

とりあえずデータベースを付属のphpMyAdminから作成した。当然UTF-8ね。
テーブルも、記事にある通りに作る。GUIで作れるけど、SQL文をコピペして作成。
次はデータのインポート…と思ったけど、CSVファイルをインポート出来ないの? インポートする形式のところに上記サイトで見たようなCSVという項目がない!
困った…と思ったら、INSERT文を羅列したファイルが用意されてた。抜かりないな。

さて、データベースの準備は完了。あとはファイルをコピペして作成するだけ。

データベース情報を格納したphpsqlsearch_dbinfo.php、検索ロジックと検索結果をXMLで吐き出すphpsqlsearch_genxml.php、HTMLファイルのphpsqlsearch_map.htmlの三つ。
さすがにphpsqlsearch_dbinfo.phpだけは環境に合わせて書き換えて、保存。当然UTF-8。

出来ました。

お手本サイトどおり、mountain view caで検索すると、ちゃーんとマーカーが出てくる(マウンテンビューで検索してもOKなのはさすがだね)。

var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;

入力した地名から緯度経度を取得して、プルダウンで選択した距離をGETでPHPファイルに送ってるだけ。

最終的に作る(かもしれない)のは検索結果を一覧表示するパターンなので、値をhiddenの項目にでもぶっこんでsubmit()するのがいいかな?(地図を併記する必要がなければ、だけど)
地図や詳細情報を表示するための個別ページは、地点のIDをGETパラメタにでも入れて作るのでいいかな?(是非ブクマしてください!といわんばかりに)

あとは…
郵便番号から検索するパターンか。入力された郵便番号を中心に、一定の範囲を区切って検索するか。どの程度までがリアリティのある範囲なのか、難しいところかな。
郵便番号での周辺検索の範囲って、みんなどうしてるんだろう??

今気づいたけど、これ、version2のコードなんだね。
version3用に書き換えるには、どうすべ? また今度。



0 コメント | コメントを書く | コメントの表示
2010年2月19日金曜日
Google Maps API はじめました

タイトルどおり、今日から始めました。

ソースが読みにくいのはご勘弁。
テンプレートを替えようかな?

開発者ガイド (Google Maps API Version3 日本語ドキュメント(非公式))
http://sites.google.com/site/gmapsapi3/


Geekなぺーじ : Google MAPS APIプログラミング
http://www.geekpage.jp/web/google-maps-api/


とりあえずJavaScriptも覚えないといかんかなぁ?

手始めにversion3の日本語ドキュメントのチュートリアルから始める。
まぁ、ここは表示するだけなので、特に問題はない。

次はイベント。
Google Maps API Version3 イベント (Google Maps API Version3 日本語ドキュメント(非公式))
http://sites.google.com/site/gmapsapi3/Home/mapsapi-v3


「UIイベントの中の引数にアクセスする」という項目がある。
クリックした箇所にマーカーを置いて、そこをブラウザのセンターに持ってくるというヤツ。
折角なので、マーカーに吹き出しを付けてみる。
次の項目「イベントリスナでクロージャを利用する」で吹き出しの出し方が出てるので、流用する。

元のソースはこちら。


function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location
, map: map
});
map.setCenter(location);
}


変更後
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location
, map: map
});
// マーカーにタイトル(ツールチップ)を追加する
marker.setTitle('テスト');
// 吹き出しの設定
var infowindow = new google.maps.InfoWindow({
content: 'クリックされたのはここです<br>緯度:'
+ location.lat()
+ '<br>経度'
+ location.lng()
, size: new google.maps.Size(50,50)
});
// 吹き出しの表示
infowindow.open(map, marker);
// クリックした箇所をセンターに移動させる
map.setCenter(location);
}

ボチボチいきますか。



0 コメント | コメントを書く | コメントの表示
Template Design: © 2007 Envy Inc.