皆様、こんにちは。
前日Google Maps APIのポリシー変更についてのエントリーを書きました。
Google Maps APIポリシー変更の影響範囲とマップ画像貼り付けの注意点 - イケメン息子とぐうたら猫の成長見守りブログ
こちらで一部触れた内容になりますが、Google Static Maps APIを使用して画像でGoogleマップを貼り付ける方法について、極力簡単に貼り付けられるようにしましたのでそのことについて記載したいと思います。スクショは違反なのでダメよ！
背景
まず、このエントリーの目的は、「簡単にGoogleマップを画像で貼り付けられる方法をお伝えする」ということです。Googleマップを画像で埋め込む方法は調べてみるとたくさんヒットするのですが、大抵のサイトは簡単といいつつ複雑で、わかる人にしかわかりません。
よかったら調べて欲しいんですけど、パラメータも沢山ある上にURLを毎回作り出す必要があり、結構面倒なんです。実際に使うパラメータなんて大抵の場合は少ないですし、たかが画像で貼り付けるだけでそこまで頑張れない人が多いと思います。もしかしたら簡単な方法が検索に埋もれているのかもしれませんけど、たどり着けませんでした。
一方で画像で貼り付けることはiframeで貼り付けるよりもサイトが軽くなり、閲覧者にとってのメリットも充分あります。その場で地図の操作ができなくなりますが、恐らく操作を行う人は少数ではないでしょうか。
ですので、複雑なパラメータには対応できませんが最低限必要だと思われるものに絞り、簡単に画像のコードを出力するようなフォームを作成しました。
Googleマップ簡易画像貼り付け用フォーム
必要事項を入力し、「コード作成＆プレビュー」ボタンを押してください。使い方は後述します。
使い方
使用準備
使い方は簡単なんですが、準備が必要で、ここだけ少しハードルが高いです。やらなければいけないことは、Google Static Maps APIの有効化と、APIキーの取得です。
以下のサイトが参考になると思います。「準備(APIキーの取得)」部分を行ってください。
Google Static Maps APIの使い方まとめ！画像地図を作ろう！
1点注意するところは「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の欄ですが、ここは正しく設定してください。私のブログであれば、「www.ikemenmusuko.net/*」となります。ワイルドカード( * )をお忘れなきよう。
フォームへ必要事項の入力
キー取得が完了したら、フォームへ以下の必要事項の入力を行います。
- APIキー
- 住所または座標
- サイズ
- ズーム
APIキー
APIキーは準備段階で取得したAPIキーを貼り付けます。ここはしっかり行ってください。厄介なのはここを誤っていても画像が表示されてしまう可能性があるということですので間違わないように確認してください。
住所または座標
「住所または座標」部分へ、住所か座標を記載します。施設名でも出来るとは思いますが充分動作確認してください。
座標の取り方はGoogle マップへアクセスし、目的地を右クリック→この場所についてを選択すると出てきます。
そこでコピーした座標をそのままペーストすれば大丈夫です。
サイズ
「サイズ」については最大640で縦横の指定が可能です。大きく設定してもスマホで見ると幅が圧縮されて無駄に縦に長くなるので小さめ（320とか）がお勧めです。PCで大きな地図を見せたい場合はプレビューで確認しつつサイズを選んでください。
ズーム
「ズーム」に関しては数字でわかりにくいですが、まず最初は15で作成してプレビューを見ながら調整でいいと思います。どうしても事前に調整したい場合は、Google マップ上のURLの「z」の前の数字が該当しますので、最適と思った数字を選択してください。
コード生成
入力できたら「コード生成&プレビュー」ボタンを押すと、コードとプレビューが生成されます。プレビューで見て想定と異なるようであれば、再度入力しなおして生成で微調整できます。ですのでとりあえず適当に入れてプレビューしてちゃんと出るかどうかまずは試してみるのがいいと思います。
貼り付けるタグ部分にはimgタグでそのまま貼り付けられるようにコードを出力しているので、WebサイトやブログのHTMLにペタッと貼り付ければ完了です。
サンプル
このフォームで作ったものをそのまま貼り付けてみました。APIキーは自前のものです。
八戸市
新宿歌舞伎町
注意点
カスタマイズ系のブログでは大抵書いてあることだとは思いますが、各自でPC、スマホ両方動作確認していただいて、くれぐれも自己責任でお願いします。
それからAPIキーは無料だと制限があります（1日のリクエスト制限が2万5000回以上など）ので各自で確認をお願いします。さすがに勝手にお金を取られることはありません（笑）
あと、プレビューのAPIキーは私のキーを使っていますのでボタンを1000回くらい押しまくるのだけはご勘弁ください。
まとめ
Google Static maps APIを利用して、できるだけ簡単にサイトにマップ画像を貼り付けられるように支援するフォームを作成しました。
答えられるかわからないですが、何か不具合等ありましたらコメントやお問い合わせフォーム、Twitter@guy0708よりご連絡ください。
最後までご覧いただきありがとうございます。
んだば、まだ。
