携帯サイトでGoogleマップを表示する方法

このページのタイトルとURLをコピーする

HTML・CSS 最終更新日：2020/02/14 公開日：2012/07/18

携帯サイトでGooglemap

最近、携帯サイト（フィーチャーフォン・ガラケー）を作成する際に、Googlemapでドハマリしました。

結論から言いますと、「Static Maps API V2」を使用して、画像としてGooglemapを呼び出すのですが、「Google Maps JavaScript API V3」の登場によって、従来の表示方法から変更があったみたい。

変更は大きく2つあって、一つはAPIkeyが不要になったこと。そしてもう一つはAPIの呼び出しURLが変わったということです。

URLがどう変わったかというと・・・
<img src="http://maps.google.com/staticmap?…
だったのが、

【新ver.】
<img src="http://maps.google.com/maps/api/staticmap?…
という感じに変わりました。

で、実際にはどのような感じで呼び出すのかといいますと、

<img border="0" src="http://maps.google.com/maps/api/staticmap?center=35.170932,136.881623&zoom=14&markers=size:mid|color:red|35.170932,136.881623&size=240x240&sensor=false&format=jpg-baseline">

これで呼び出せます。このまま貼り付けると名古屋駅が中心に表示されます。緯度経度とかサイズのところとかをいじると、それなりに使える感じになります。

では、<img src="http://maps.google.com/maps/api/staticmap?の後から順番に解説していきます。

center=35.170932,136.881623
→地図の中心にする場所の経度緯度

&zoom=14
→マップの拡大具合

&markers=size:mid|color:red|35.170932,136.881623
→左から順にマーカーのサイズ、色、マーカーを立てる位置の緯度経度。それぞれ「|」で区切ります。

&size=240×240
→表示するマップのサイズ。とりあえず携帯だから240にしてます。

&sensor=false
→基本はfalse。スマホなどGPS機能がある媒体で表示する場合はtrue。

&format=jpg-baseline
→表示する画像フォーマット（JPG・GIF・PNGから選べる）。jpgでも呼び出せるけど、AU対策としてjpg-baselineって書くといいみたい。

という感じです。まだまだオプションはありますが、これだけでとりあえずは十分かと。もっといろんなオプションも知りたいよー！って方は以下のリンクが詳しかったのでオススメ。

Google Static Maps API入門

で、ここからが個人的にドハマリしたところなんですが、以上の項目をきっちり記載しているのに、どうしても地図が表示されない！散々試した結果、最終的にわかったのが、

ソース上で改行しちゃだめ！

ってことです。まっすぐ書いてください。

それでは。