APIを使用するには、Google提供のスクリプトをインクルードする。この際、登録キーが必要となる。バージョン1の機能は現在も使えるようだが、動作の保証はされない。説明サイトも古いものがあるので注意。見分け方として、バージョン1はGMapクラス、2ならGMap2クラスを使用する。GMap2クラスのインスタンスを生成し、各種オブジェクトを追加・設定していくことで、任意の地図を作成する。一日あたりの使用量、1クライアントIPにつき15,000件という制限がある。APIというのもある。こちらはJavaScript不要、画像ファイルとして地図を取得するAPI。GMap2(document.getElementById("map"));中心位置setCenterメソッドを用いる。引数で初期位置ポイントをGLatLngオブジェクトで指定する。第二引数でズーム度を指定する。大きい数値ほど、詳細表示になる。11);panToメソッドを使う方法もある。panToの場合は、見える範囲であればスムーズ移動する。setCenterは瞬時移動のみ。139.15));相対移動panDirectionメソッドを使用すると画面サイズに合わせて表示位置を移動する。単位は、画面幅・高さの1/4。0);相対移動(ピクセル指定)panByメソッドを使用すると指定ピクセル分だけ現在の位置から移動する。20));ズームズーム(縮尺)はレベルとして保持している。数が大きいほどより詳細表示となるが、最大値は今後、変わる可能性がある。総ての地域でレベル19まで表示可能というわけではなく、画像が用意されていない地域もある。ユーザ操作によるズーム度の変化をイベントとして取得することが出来る。現在のズーム度を取得します。map.getZoom();ズームイン&アウト相対的な操作を行うメソッドです。通常の市街地図を表示します。このマップタイプは航空写真を表示します。このマップタイプは航空写真上に透明な主な通りのレイヤを表示します。このマップタイプは地形や樹木などの地形的特徴を持つ地図を表示します。コントロール内に表示されません。このマップタイプは月表面の陰影の付いた地形図を表示します。地形は高度によって色分けされています。コントロール内に表示されません。このマップタイプは、月の周回軌道から撮影された写真を表示します。コントロール内に表示されません。このマップタイプは火星表面の陰影の付いた起伏図を表示します。地形は高度によって色分けされています。コントロール内に表示されません。このマップタイプは、火星の周回軌道から撮影された写真を表示します。コントロール内に表示されません。このマップタイプは火星表面の陰影の付いた赤外線地図を表示します。温度が高くなるほど明るく、低くなるほど暗くなっています。このマップタイプは、星空をモザイク合成した天球全体を覆う画像を表示します。(G_NORMAL_MAP、G_SATELLITE_MAP、G_HYBRID_MAP)。(G_MOON_ELEVATION_MAP、G_MOON_VISIBLE_MAP)。(G_MARS_ELEVATION_MAP、G_MARS_VISIBLE_MAP、G_MARS_INFRARED_MAP)。(G_SKY_VISIBLE_MAP)。map.setMapType(G_HYBRID_MAP);地図タイプの取得getCurrentMapTypeメソッドにて、現在選択されている地図タイプを取得できる。戻り値は、GMapTypeクラスのオブジェクト。map.getCurrentMapType();alert(maptype.getName(false));コントロールaddControl()メソッドに、mapオブジェクトにコントロールを追加する。引数は、追加するコントロールのオブジェクトを指定する。第二引数はオプションで、表示位置を指定することが出来る。GControlインタフェースを実装すれば独自のコントロールを作成できる。コントロールhttp://code.google.com/intl/ja/apis/maps/documentation/controls.htm簡易コントロールボタンボタンで4つのルートにドラッグして、ズームイン/ズームアウトするコントロール。GSmallMapControl());コントロールボタンボタンで4つのルートにドラッグして、ズームイン/ズームアウト、ズームスライダーを表示するコントロール。GLargeMapControl());ズームコントロールボタンでズームイン/ズームアウトするコントロールを作成。GSmallZoomControl());地図の縮尺を表示するコントロールを作成。切り替えボタンサポートされているマップタイプをボタンで選択したり切り替えることのできる、標準のマップタイプコントロールを作成。GMapTypeControl());サポートされているマップタイプを切り替えることのできる、ドロップダウン形式のマップタイプコントロールを作成。GMenuMapTypeControl());サポートされているマップタイプをボタンおよびネストされたチェックボックスで選択したり切り替えることのできる、「ネスト」形式のマップタイプコントロールを作成。ナビゲーションのためにメインの地図の隅に折りたたみ可能な概観の小さな地図を作成。1ピクセルの黒い線で概観地図を作成。GOverviewMapControl());表示位置を指定するGControlPositionオブジェクトで表示位置を指定する。引数は基準点、第二引数は基準点からの距離。GSize(10,10)));移動禁止ドラッグによる地図の表示位置の移動を禁止する。任意の位置に印を付けることが出来る。引数に設置位置を指定する。第二引数はオプション、指定することにより詳細な設定が可能。140.21)));任意の画像をマーカーにする任意の画像URLを与えて関連付けたGIconオブジェクトを生成する。imageには、画像URL。iconSizeniには、画像の表示サイズを指定。iconAnchorには、画像の表示基点を指定。(0,0)とすると左上が基点となる。m0);map.addOverlay(mark1);マーカーの位置を取得GMarkerクラスのgetPoint()メソッドを使う。);吹き出し第一引数に吹き出し場所。第二引数にメッセージオブジェクトを指定する。document.createTextNode("吹き出し"));HTMLメッセージHTML文を直接記述する。src>を使用すれば画像も含められる。140.21));map.addOverlay(mark1);mark1.openInfoWindow(document.createTextNode("マーカーに吹き出し"));任意画像を使ったマーカーと、この吹き出しとは同居できない?吹き出しを個別に作れば問題ない。{this.openInfoWindow(this.info);});map.addOverlay(mark1);マーカーのクリックイベントに吹き出し出力処理を記述すればいい。呼出元のマーカーオブジェクトはthisとして参照できる。住所から緯度経度GClientGeocoderクラスを使用する。一つの候補を取得getLatLngメソッドを使用する。-与えられた住所に対して、一つの候補を返す。-第一引数に住所を指定。-第二引数にコールバック関数を指定する。);複数の候補を取得getLocationsメソッドを使用する。与えられた住所に対して、複数の候補を返す。第二引数にコールバック関数を指定する。複数の候補を一度に取得(getLocationsメソッド)http://www.ajaxtower.jp/googlemaps/geocoding/index2.htmlリサイズ地図を流し込むDIVのWidthとHeightを変更すれば、自動的にリサイズされる。ブラウザでの初期表示時、リサイズ時のイベントで、DIVサイズを変更すればok。クライアントエリアのサイズ取得はブラウザ間で互換性が無いので注意。何かと話題のストリートビュー。地図とは独立しているので、ストリートビューだけの表示も出来る。有効な道路の表示ストリートビューが有効な道路を青いラインで表示する。GMap2オブジェクトにGStreetviewOverlayオブジェクトをオーバーレイとして追加することで表示される。GStreetviewOverlay();map.addOverlay(street);-表示をOFFにする場合は、removeOverlayメソッドを用いる。map.removeOverlay(street);基本ストリートビューを表示するエリアを<DIV>タグで用意しておく。地図の表示と異なる点として、緯度経度の座標情報に加えて、カメラ方向情報(方角・視点(高さ)・ズーム)が必要。カメラ方向情報は、GPovクラスで扱う。ストリートビューの各点の情報をパノラマと呼ぶ。表示するGStreetviewPanoramaオブジェクトを生成する。GStreetviewPanorama(document.getElementById("dvStView"));-第二引数で初期位置・カメラ方向を指定することが出来る。