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

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入門

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

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

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

それでは。

CONTACT

Webサイト制作のご相談やご質問、ご不明点などございましたらこちらよりお問い合わせください。
「ホームページ制作について」とお伝えください。担当者におつなぎいたします。

オフィス一覧へ

受付時間|9:00~18:00(土・日・祝除く)

※お電話にてお問い合わせの際はオフィス一覧からお近くのオフィスにご連絡ください

※全国対応

ホームページ無料診断 毎月10社限定

ホームページ制作のプロがユーザビリティ・SEO・競合などを多角的に分析し、
具体的な改善案をご提案します。

無料診断する