Google Mapを画像にして貼りつけられるAPI

/ Webｺﾝｻﾙﾃｨﾝｸﾞ部　

黒木 (2010年9月 1日 21:19)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Google Apps

Google Mapを画像としてホームページに埋め込む方法です。

一般的に使われているiframeで表示する方法※1では、
ひとつのページに複数のMapを貼りつけたときにページの読み込みが遅くなってしまいます。
たとえMapひとつだけだとしても、わずかな表示のタイムラグが気になる方もいるでしょう。

そういった場合にこのAPIが活躍します。
APIの詳細は、Google code「Static Maps API デベロッパーガイド」をご覧いただければ良いですが、手っ取り早く作るには次のページをご利用ください。

ソースのkey=の後ろには、APIキーを入れます。
APIキーはGoogleアカウントでログインした状態で、ホームページのURLを入力すれば取得できます。

ソースはimgタグで記述します。→<img src="生成されたURL" />
imgタグなのでaltも入れられます。

＜完成サンプル＞
株式会社アイロベックス
地図をGoogle Mapで見る

【ご注意】
Google code「Static Maps API デベロッパーガイド」にも同じようにリンクURLを作成してくれるページを紹介していますが、そこで作成すると画像が表示できませんでした。
これは赤字の部分が原因でした。

誤）http://maps.google.com/maps/api/staticmap&center=.....
正）http://maps.google.com/staticmap&center=.....

また、Mapのキャプチャを撮影して使用すると著作権侵害になりますが、Google Mapの規約では、APIから取得した情報をそのまま使用する場合は問題ないそうです。（Googleへ確認済み）

※1　iframeで貼り付ける方法

Google Mapの画面右上の「リンク」ボタンからHTMLソースを取得します。

※クリックすると拡大します

「システム開発ブログ」へのコメントやご意見等ありましたら、ファンページまでお願いします。 Facebook のファンページ

[PR]
他社のシステムも直します。資産を活かしてシステムリフォーム

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できます

システム開発のアイロベックス（東京都新宿区）