Google Maps API version2

Google Maps API v2　：　入門：まずは地図を設置する

Google Maps APIとは、どんなサービス？ APIキーの登録を行なう まずは表示してみる サンプルHTMLコードの基本構成 緯度・経度の取得 【関連サンプル】 地図がドラッグしたら、ドラッグした範囲の中心座標を取得する Google MAP + Google Earth Google Maps を地形表示する いろいろな地図タイプを表示する 指定の経度・緯度の最大ズームレベルを取得する

無料で地図が載せられます!

Google Maps API v2　：　マーカー・情報ウィンドウ（吹き出し）

地図にマーカーを表示する マーカーをオリジナル画像にする マーカーを押すと、吹き出しを表示してみる タブ付きの吹き出しを表示してみる 吹き出しの中に衛星写真を表示する ドラッグ＆ドロップできるマーカーを作る 同じような複数のアイコンを効率よく追加する GMakerManagerを使う 【関連サンプル】 ドラッグ＆ドロップされた領域を取得する クリックされた位置にマーカーを追加する 指定の範囲内にあるマーカーを表示する 複数の地図を表示して、マーカーを追加したい カスタムマーカーとツールチップ マーカーの重ね順を変更する ふきだしに投票機能をつける 内容を変更できる吹き出しを表示する 吹き出しの最大幅を固定する 最初からマーカーの吹き出しを表示する GMarkerManager with LabeledMarker

マーカーにふきだしを付けた例

Google Maps API v2　：　コントロール

マップコントローラを表示する グーグルマップの右下に小さい地図を表示する 地図タイプを変更できるコントローラを表示する 地図のスケール(尺度定規)に表示する 階層式のマップタイプコントローラを表示する ナビゲーションコントロールを表示する ３Ｄのズームコントロールを表示する 【関連サンプル】 右下に小さい地図を表示する 右下の小さい地図のマップタイプを変更する 地図に自作のボタンを表示する 地図上にフォームを表示する ズームコントローラのズーム範囲を制限する

右下に小さい地図が表示された

Google Maps API v2　：　イベント

最後にクリックしたマーカーを別のマーカーに変更する 地図の中心に常に『十字マーク』を表示する 【関連サンプル】 リンクをクリックしたら、吹き出しを表示する リンクをクリックしたら、吹き出しを表示する その2 地図がドラッグしたら、ドラッグした範囲の中心座標を取得する ズームレベルに応じて表示する画像を変更する

クリックすると、別のマーカーに変わる例

Google Maps API v2　：　外部データとの連携編

【関連サンプル】 XMLファイルを読み込んで、マーカーを追加する その1 XMLファイルを読み込んで、マーカーを追加する その2 JSON形式のデータを読み込んで、マーカーを追加する セレクトボックスで選択したマーカーを表示する(KML) 2つのセレクトボックスで出発地と到着地を選ぶ(KML) KMLでマーカーの画像を変更する

XMLファイルを読み込んで地図にマーカーを追加した例

Google Maps API v2　：　オーバーレイ・ポリライン・ポリゴン・レイヤー

【関連サンプル】 地図に線(ライン)を描画する 線を引くサンプル2 ズームレベルに応じて表示する画像を変更する GPolygonでメッシュを作る 地図に情報を付け加える アメリカの交通情報を地図に表示する

複数のポリゴンを描画した例

Google Maps API v2　：　ジオコーディング・ディレクション・ストリートビュー・その他

【関連サンプル】 住所を検索して、その場所を表示(GGoogleBar) 住所や名称の場所にマーカーを追加　その１ 住所や名称の場所にマーカーを追加　その２ 地図上にGoogle Adsenseのマーカを表示する Googleマップ・ストリート・ビューを実装する Google ストリートビューの視点とマーカーを同期する GDirectionでルート検索を行い、各ポイントに説明用のマーカーを設置する

ストリートビューを情報ウィンドウに表示した例