Google マップをケータイの画面領域に応じて正しく表示する方法

今までも非公式に表示する方法はありましたが、ようやく正式に使えるようになったみたいです。

この日をどれだけ待ち望んでいたことか！

さて、実装方法は、上記ブログにある通り、緯度経度情報等の必要な情報を指定した以下のようなimgタグを記述するのみ。

<img src="http://maps.google.com/staticmap?center=35.65641,139.699477&markers=35.65660,139.699477,red&zoom=16&size=500x300&key=[ここに Key を記述]">

HTMLの知識さえあればＯＫ！

と、思いきや一箇所だけケータイ特有の難所があります。

それは size パラメータです。

ご存知のようにケータイの画面領域は機種により様々です。

size パラメータにいい加減な固定値を指定すると、異常に小さく表示されたり、画面からはみ出たりします。

適切な大きさで表示するにはどうしたらよいか？

結論から言うと、PEAR::Net_UserAgent_Mobile を用いて画面領域を取得する方法が最も賢明だと思います。

以下、サンプルコード。

<?php
/**
 * 以下のサンプルコードは初心者の方でもわかりやすいよう、必要以上に冗長に書いています。あしからず。
 */

/**
 * PEAR::Net_UserAgent_Mobile を用いてケータイ端末の画面横幅/縦幅を取得
 * 参考： http://pear.php.net/package/Net_UserAgent_Mobile/docs/0.31.0/Net_UserAgent_Mobile/Net_UserAgent_Mobile.html
 */
require_once 'Net/UserAgent/Mobile.php';
$agent   = &Net_UserAgent_Mobile::factory();
$display = $agent->getDisplay();
$width   = $display->getWidth();
$height  = $display->getHeight();


/**
 * 画面横幅の90%, 画面縦幅の80% の大きさで表示する例
 * point 1: サイズには整数しか指定できないので必ずintval()により整数化すること
 * point 2: $width - 20 のように固定幅を引くことでマージンを算出せず、倍率指定にするのがコツ（だと思います）
 */
if ($width) {
    $img_width  = intval($width  * 0.9);
    $img_height = intval($height * 0.8);
} else {
    $img_width  = $img_height = 120;// 画面領域を正常取得できなかった場合は 120px * 120px
}
echo '<img src="http://maps.google.com/staticmap?center=35.65641,139.699477&markers=35.65660,139.699477,red&zoom=16&size='.$img_width.'x'.$img_height.'&key=[ここに Key を記述]">';
?>