「携帯サイトに簡単にgoogleの地図を取り入れてみる」ということで、
便利な携帯用の地図が自分のサイトに入るとすごい便利になります。
あくまでも今回は個人利用の範疇で書き進めます。
今までは、自分のサイトに地図リンクを貼り付け、
毎度毎度リンク先にジャンプして地図を確認していたと思いますが、
今回やってみようと思っているのは、パラメータを渡したURLを、
直接<img>タグに埋め込めるというもの。すごく便利です。
調べてみるとこの方法にも2通りあるみたいです。
1つ目はStatic Maps APIを使う方法
googleが提供するAPIを利用して上に書いてあるようなことができる方法です。
ただし、APIキーの取得（無料）や、1日にユニーク画像1000枚という制限がつくみたいです。
個人の範疇で利用する場合は十分な枚数だと思います。
2つ目は直接パラメータを入力してタグに埋め込む方法
こちらの方法はAPIキーをいれなくてもURLに緯度経度を埋め込むと、
上に書いたのと同じ形で使うことができます。
ただし、調べたサイトではこの方法は、
非公式的な利用方法であるため、Googleマップ利用規約に反する恐れがあります。
と書かれてあります。
ですので、あくまで個人利用の範疇で個人の責任で使ってくれということです。
例えば、個人の範疇を超えて地図を見るのにお金かかるとか、
そういうサービスを作りたいのであれば1つ目の制限事項付の方を推奨します。
上に書きましたが、今回はあくまで個人でさらっと使うものとして2つ目の方法をご紹介致します。
では実際に埋め込んでみましょう。
まずはじめに、埋め込むURLの生成方法です。
必ず指定しなければいけないものです。
http://maps.google.com/mapprint
これを生成するURLの前につけます。
次に必須のパラメータを書きます。
出力する画像の大きさを指定
r
最大は2000ピクセルです。
地図の中心地点となる緯度と経度の指定
c
世界測地系、degree形式で指定。小数点は除く。小数点以下6桁目まで必ず指定し、
経度、緯度の順番で書かなければいけません。
縮尺の指定
z
地図のズームを指定できます。1-17までです。
1から順に数字が大きくなるにつれ広域になります。
必須項目はここまでです。
あとは、マーカー
l(エル)
マーカーの種類はコチラの参考サイトに色々載ってます。
最後に画像の出力形式
image_format 1:GIF 2:PNG 3:JPEG
デフォルトはGIFになります。
全部挿入するとこんな感じですか。
<img src="http://maps.google.com/mapprint?tstyp=4&c=135525842%2C34687363&image_format=1&r=200%2C200&z=3&l=135525842%2C34687363%2C16">
上で生成したURLをどのように使うか。
簡単です。<img src=”ココ” alt=”” />に埋め込むだけ。
埋め込むとこんな感じです。
ただもっと動的に使いたい場合は手順が増えます。
例えばGPSとか、登録してあるお気に入りの店とか、そういう何かをその都度探したいという場合。
当然ながら予め小数点以下6桁の緯度経度を取得しておく必要があります。
その取得した緯度経度データから小数点(.)を抜きます。
ex.
$point = '34.687363,135.525842';
$latlon = str_replace('.', '', $point);
$latlon = str_replace(' ', '', $latlon);
$array = explode(",", $latlon);
arrayの中身です。
array(2) { [0]=> string(8) "34687363" [1]=> string(9) "135525842" }
ここで注意して頂きたいのが、
緯度経度ではなく経度緯度に逆転させます。
はじめから経度緯度になっていれば問題はありませんが、
これが緯度経度になっていると、地図を取得できないので注意してください。
http://maps.google.com/mapprint?tstyp=4&c={$array[1]}%2C{$array[0]}&image_format=1&r=200%2C200&z=3&l={$array[1]}%2C{$array[0]}%2C16
このようにその都度表示させる地図を変更できるようにします。
さらにこだわるなら、zoomの値も動的に変えてあげましょう。
今は縮尺度3の地図を表示してますが、ここに変数をあてることによって、
縮尺度を変えるリンクを同じページに飛ばすように貼り、
その送られてきたパラメータを取得すればどんどん地図の縮尺を変更できます。
応用は色々考えられますので、是非色々試してみてください。
