カスタマイズも意外とカンタンなGoogleマップの画像
六本木、渋谷、青山の3箇所にマーカーをつけてみたGoogleマップの画像
APIとか聞いて引いてしまう人もコツさえ掴めば意外と簡単にカスタマイズできてしまうシンプルさ。自分でいじってみるいい機会かもしれません。
API初心者用リファレンス
私と同様「APIなんざあまり分からん」という人向けのものをご紹介。今すぐ自分で試したいという方は、画像をすぐに生成できるStatic Maps Wizardか、開発者向けガイドGoogle Static Maps APIへどうぞ。
生成コードを分解
Static Maps Wizardで生成されるコードは下記のとおり。（※サイトに貼り付けるときはimgタグと組み合わせます。）
このコードを分解してみると下記のようになります。
各項目を「 & 」でつなげていく感じですね。ちなみにこの記事中のマップにあるような複数のマーカーを表示させるためには、「 markers= 」の部分が下記のサンプルのようになります。
ちなみに「 %7C 」は「 | （パイプ）」をURLエンコードしたものですので、それぞれのステータスを「 | 」で区切ればいいということになります。
それぞれの経度緯度を出したいときはStatic Maps Wizardの設定用マップのマーカーを動かせば、生成されるURLへ自動的に反映されます。
サイトに貼り付ける最終形のサンプルコード
そんなこんなでできたサイト貼り付け用のサンプルコードが下記コードになります。
こういったやり方をしていると分からなくてもはまって来ますｗｗ ある意味謎解きみたいな感覚ですよね。 そして今日の個人的トリビアは、「API keyってサブドメインで使う場合、URL登録時に「 www 」を外しておけば全部共通で使えるんだ。」です。 恥ずかしながら気づいてなかったｗｗ
関連情報
Technorati Tags: GoogleMapsAPI , 地図
