取得した位置情報でGoogle Static Mapsを表示させる。
いよいよ本題。
取得した位置情報は10進に変換済みであるとして、地図を表示させます。ついでにその中央にマーカーをひとつ置く。
まずはGoogleのサイトで書式確認。
Google Static Maps API - Google Code(日本語) *1
Google Static Maps API - Google Code(英語) *2
バージョンに差異があるので、基本は英語サイトで、補足的に日本語サイトを使うのがいいかも。
サンプルとしてこう書いてある(パラメタごとに改行入れました)。
http://maps.google.com/maps/api/staticmap
?center=Brooklyn+Bridge,New+York,NY
&zoom=14&size=512x512
&maptype=roadmap
&markers=color:blue|label:S|40.702147,-74.015794
&markers=color:green|label:G|40.711614,-74.012318
&markers=color:red|color:red|label:C|40.718217,-73.998284
&sensor=false
パラメタはリファレンスを参照してもらうとして、こんなカンジにしてみた。
各種の値はそれぞれ変数にいれてあると想定してください。
$latは緯度で、$lngは経度ね。
// 中心座標 $center = $lat.",".$lng; $query_string['center'] = $center; // 表示する地図の種類 $query_string['maptype'] = "roadmap"; // 画像サイズ $query_string['size'] = $width."x".$height; // ズームレベル $query_string['zoom'] = $zoom; // sensorは必須項目 $query_string['sensor'] = "false";
こうして配列に入れるのは、http_build_query()を使いたいから。
マーカーを一つだけ表示させる。
// 色 $marker[] = "color:red"; // マーカーのサイズ $marker[] = "size:mid"; // 表示位置は地図中央ってことで $marker[] = $center; // 全てのパラメタは「|」でつなぐ $query_string["markers"] = implode("|", $marker);
これで準備OKです。
この$query_stringという配列を実際のQUERY_STRINGにする。
$qs = http_build_query($query_string);
ちゃんとQUERY_STRINGが生成されていれば、地図画像を表示する。
<img src="http://maps.google.com/maps/api/staticmap?<?php echo $qs; ?>">
正常にFirefox(+FireMobileSimulator)で表示できた。
念の為、i-modeのシミュレータで表示させてみようか。
…と思ったらPNGには対応してないのか。
// 画像フォーマットを指定する $query_string['format'] = "jpg";
これでOKですな。
とりあえず、ここまでで第一段階か。