【Javascript】Ajax Google Mapsを自サイトに設置する

Google Mapsを自サイトに設置する

---

1: Google Maps とXMLHttpRequest
2: Google Maps 設置までの流れ
3: Google Maps はじめの一歩
4: 地図にマーカーを表示する

Google Maps 設置までの流れ

Google Mapsのサイトhttp://www.google.com/apis/maps/を開くと、「Sign up for a Google Maps API key」というAPIを利用するための「キー」を申し込むためのリンクがあります。

そこから、「Google Maps API - Sign Up」のページへ入ると、「My Web Site URL」という、地図を設置するURLの記入欄と、使用規約があり、それを読んで同意すれば、キーが発行されます。

このとき、Googleアカウントを持っていなければ、自動的にアカウントの申し込みへ進み、アカウント取得後に、申し込んだ自サイト用のAPIキーとサンプルが表示されます。

あとは、自分のページに設置するだけです。カスタマイズの方法は、下記で調べることができます。

Google Maps API Documentation
http://www.google.com/apis/maps/documentation/


参考までに、わたしが和訳してみたリファレンスも下記にあります。(多少自由に訳しましたのでオリジナルの解釈なども含まれていますがご了承ください)

Google Maps API
Version 2 Class Reference (意訳とサンプル)
http://jsgt.org/ajax/newmon/GoogleMapsAPIv2.htm

Google Mapsは商用、非営利を問わず無料で利用できます。 使用規約は英語ですが、大事なことが書かれていますので必ず読んでおきましょう。 たとえば、該当サイトは数少ないとは思いますが、 1日あたり5万以上のページ・ビューを得ると予想するなら、 Googleの許可が必要です。地図の上でロゴや属性を変更したり見えなくすることができません。 また、FAQによれば、イントラネットや 非ウェブアプリケーション内で利用することはできません。

現在のGoogle Mapsの動作ブラウザは下記の通りです。

IE 5.5+ 
Firefox 0.8+ 
Safari 1.2.4+ 
Netscape 7.1+ 
Mozilla 1.4+ 
Opera 7+ 

Google Mapsには、ブラウザの互換性を調べてくれるGBrowserIsCompatible()という関数が用意されています。 たとえば、下記のようにスクリプトを書くだけで、自動分岐させることができます。

  if( !GBrowserIsCompatible() ){
     //Google Mapsが動作しないブラウザ用の処理
  } else {
     //動作する場合の処理
  } 

Google Maps v2を設置する(1)