GoogleMapsをページに埋め込む方法: plugint-T

int blogs

すべて表示閉じる
generated by レビュー・ポスター

Google Mapsは商用、非営利を問わず無料で利用できる地図サービスです。さらにAPIが公開されてい、自分のサイトに埋め込んだり他のサービスとの連携が可能です。

googlemapsを埋め込む方法
photo by retro traveler クリエイティブ・コモンズ表示 - 非営利 2.5

非常に便利で使い勝手が良い地図ツールGoogle Mapsですが、今回はGoogle Maps APIを用いてページにgooglemapを埋め込む方法を紹介します。

詳しくは以下

1.google map APIキーの取得
google map APIを「Google Maps API」から取得します。（googleアカウント必須）アクセス後「Sign up for a Google Maps API key」と言う所をクリックすると認証画面に入ります。アドレスを入力し、その後規約を承諾し「Generate API Key」をクリック。その後申し込んだ自サイト用のAPIキーとサンプルが表示されます。

2.設置
基本的にはサンプルコードに必要な情報は全て書かれていますのでそちらを見ながら必要な箇所だけ抜き出し。自分のサイトに設置します。使用規約には十分注意して設置しましょう。例えば 1日あたり5万以上のページ・ビューがあるサイトは Googleの許可が必要です。また地図の上でロゴや属性を変更したり見えなくすることは禁止されています。その他にもイントラネットや非ウェブアプリケーション内で利用することはできません。

3.設置
初期の設定では表示がアメリカになっていますしサイズも設置したいサイズではないと思いますので自分の設置したい形でカスタマイズします。カスタマイズ方法は下記のリンクに詳しいカスタマイズ方法が記載されています。

Google Maps API クラスリファレンス意訳とサンプル

■参考にしたWEBサイト
Ajax Google Mapsを自サイトに設置する - ［JavaScript］All About