Google Static Maps APIを使うと、
地図を画像として切り出せるので、携帯でも使えるのですが、
画像だけ表示されても、スクロール出来ないとあまり実用的ではありません。
そこで、よくある、← → ↑ ↓のリンクをつけて
スクロール出来るようにしてみました。
http://www.netflowers.co.jp/map_mobile.php?lat=34.819533&lng=137.732836
いい感じ！
これで、GoogleMapを使った、携帯用サービスを色々作れそうです。
仕組みは少しずつ緯度経度をずらして移動しているのですが、
ズームレベルによってずらす量が変わってくるので、結構複雑な計算が必要です。
誰かの役にたつかもしれないのでさらしてみます。
ソースコードは、
元ネタは、http://www.polyarc.us/adjust.js
をPHP用に書き換えました。
地図を画像として切り出せるので、携帯でも使えるのですが、
画像だけ表示されても、スクロール出来ないとあまり実用的ではありません。
そこで、よくある、← → ↑ ↓のリンクをつけて
スクロール出来るようにしてみました。
http://www.netflowers.co.jp/map_mobile.php?lat=34.819533&lng=137.732836
いい感じ！
これで、GoogleMapを使った、携帯用サービスを色々作れそうです。
仕組みは少しずつ緯度経度をずらして移動しているのですが、
ズームレベルによってずらす量が変わってくるので、結構複雑な計算が必要です。
誰かの役にたつかもしれないのでさらしてみます。
ソースコードは、
<?
//GOOGLE API KEY
define("GOOGLE_MAP_API_KEY","ABQIAAAA2kAO3WQCS6Ln-isUJSg-TRSHuy3caWQsgPOO9HzzRn2Ro8VLhRTj_0Q6dtr-c5iHTmFlbhcC1Jz4mw");
//マークを打つ位置
$lat = htmlspecialchars($_GET["lat"]);
$lng = htmlspecialchars($_GET["lng"]);
if($lat == ""){
$lat = "34.819533";
}
if($lng == ""){
$lng = "137.732836";
}
//地図の中心
$c_lat = htmlspecialchars($_GET["c_lat"]);
$c_lng = htmlspecialchars($_GET["c_lng"]);
if($c_lat == ""){
$c_lat = $lat;
}
if($c_lng == ""){
$c_lng = $lng;
}
//縮尺率
$z = htmlspecialchars($_GET["z"]);
if($z ==""){
$z = 15;
}
//移動後の位置を計算
$top = adjust($c_lng,$c_lat,0,-100,$z);
$bottom = adjust($c_lng,$c_lat,0,100,$z);
$left = adjust($c_lng,$c_lat,-100,0,$z);
$right = adjust($c_lng,$c_lat,100,0,$z);
/*
function adjust
$x:中心の経度
$y:中心の緯度
$deltaX:ずらしたい距離(ピクセル単位)
$deltaY:ずらしたい距離(ピクセル単位)
$z:ズーム
戻り値
array("x"=>"移動後の経度","y"=>"移動後の緯度");
*/
function adjust($x,$y,$deltaX,$deltaY,$z){
$offset=268435456;
$radius=$offset / pi();
$xy = array( "x"=>((round(round($offset + $radius * $x * pi()/180)+($deltaX << (21-$z))) - $offset) / $radius) * 180 / pi(),
"y"=>(pi() / 2 - 2 * atan(exp((round(round($offset - $radius * log((1 + sin($y * pi() / 180))/(1 - sin($y * pi() / 180))) / 2)+($deltaY << (21-$z))) - $offset) / $radius))) * 180 / pi()
);
return $xy;
}
?>
<!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>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>Google Map</title>
</head>
<body>
<center>
<br>
<img src="http://maps.google.com/staticmap?center=<?=$c_lat?>,<?=$c_lng?>&zoom=<?=$z?>&size=220x220&maptype=mobile&markers=<?=$lat?>,<?=$lng?>&key=<?=GOOGLE_MAP_API_KEY?>" />
<br />
<a href="map_mobile.php?lat=<?=$lat?>&lng=<?=$lng?>&c_lat=<?=$left["y"]?>&c_lng=<?=$left["x"]?>&z=<?=$z?>" accesskey="4">4:←</a>
<a href="map_mobile.php?lat=<?=$lat?>&lng=<?=$lng?>&c_lat=<?=$top["y"]?>&c_lng=<?=$top["x"]?>&z=<?=$z?>" accesskey="2">2:↑</a>
<a href="map_mobile.php?lat=<?=$lat?>&lng=<?=$lng?>&c_lat=<?=$bottom["y"]?>&c_lng=<?=$bottom["x"]?>&z=<?=$z?>" accesskey="8">8:↓</a>
<a href="map_mobile.php?lat=<?=$lat?>&lng=<?=$lng?>&c_lat=<?=$right["y"]?>&c_lng=<?=$right["x"]?>&z=<?=$z?>" accesskey="6">6:→</a>
<br />
<?if($z > 0){?>
<a href="map_mobile.php?lat=<?=$lat?>&lng=<?=$lng?>&c_lat=<?=$c_lat?>&c_lng=<?=$c_lng?>&z=<?=$z-1?>" accesskey="1">1:広域</a>
<?}?>
<?if($z < 18){?>
<a href="map_mobile.php?lat=<?=$lat?>&lng=<?=$lng?>&c_lat=<?=$c_lat?>&c_lng=<?=$c_lng?>&z=<?=$z+1?>" accesskey="3">3:詳細</a>
<?}?>
</center>
</body>
</html>
元ネタは、http://www.polyarc.us/adjust.js
をPHP用に書き換えました。
Google Static Maps APIは、1ユーザ(1IPアドレス)当たり、表示は1日1000種類まで（※原文によると「1000 unique image requests per user per day」）という制限があります。
http://code.google.com/apis/maps/documentation/staticmaps/index.html#Limits
以前私も同じようなものを作ったのですがその制限のおかげでサービスとしての利用は難しそうで断念しました。
足りそうな気がしますが、携帯だと同一IPで複数のユーザーが使うので
厳しいかもしれませんね。
これ単体で、サービスとして使うのはちょっと難しいと思いますが、
PVの多くない携帯HP内の地図部分など、
用途によってはそれなりに使えるかと思います。
Googleさん、なかなか良いサービスをだしてくれました。
thanks for your blogs http://hirokawa.netflowers.jp/entry/26247/ (Google Static Maps APIを使ってPHPで携帯に、スクロール出来る地図を表示する。)
this give me may many mind
I want to change it to c#
but, I cant't download the "http://www.polyarc.us/adjust.js"
if you have this js, can you mail it to me?
My Email: kangtadu@163.com
My Msn: kangtadu@hotmail.com
I look forward to receiving your reply
Thanks you for seeing my code.
I am glad.
I will send 'adjust.js' for you by email.
ソースコードの中で、「$offset」がありますが、これはなんの意味かわかりませんが、少し詳しく解説してもらえますか？
よろしくお願いいたします。