◆Google Maps JavaScript API V3 Example（Demo）一覧
※本ページのiPhone（スマートフォン端末）用デモを見るには、ブラウザはGoogle Cｈromeを使用して下さい。
- はじめに
- ともかく地図を表示する。（デフォルト：ナビ、地図タイプ、距離スケール表示）
- WordPressの記事内にGoogle Mapを表示させる
- アイコンとインフォウィンドウ
- コントロール
- マーカー（アイコン）の配列についての検証(２次元配列を理解してみる)
- Google Adsense グーグルアドセンス
- 複数マーカーを配列から読み込むサンプル
- 外部XMLファイルからアイコン（マーカー）データ読み込み
- マーカー（アイコン）
- 単一マーカのアイコン種類の変更＋インフォウィンドウ
- 地図をクリックしてマーカーを追加する／全てのマーカーを消す（その1）
- 地図をクリックしてマーカーを追加する／全てのマーカーを消す（その2）
- マーカー（アイコン）をクリックして、そのマーカーを削除する
- 移動可能なアイコン
- 複数マーカー・XMLファイル読み込みのアイコン種類の変更＋インフォウィンドウ
- 複数マーカーで別々のアイコンを指定＋インフォウィンドウ（1）
- 複数マーカーで別々のアイコンを指定＋インフォウィンドウ（2）
- アイコンのアニメーション
- Google Map にパノラミオ（panoramio）の写真サムネイルを地図にオーバーレイ（overlay）表示させる
- 地図に表示させるパノラミオ（panoramio）写真をタグで指定する。
- パノラミオ（panoramio）写真をタグで検索するInputフォームを追加する。
- ｋｍｌファイル（アイコンとレイヤー）
- インフォウィンドウ（infowindow）
- Youtube動画を吹き出し（インフォウインドウ）に表示するサンプル
- インフォウィンドウ（吹き出し）を地図の中心座標に表示させるpanTo（）を使ったサンプル
- 地図をドラッグしたらマーカーのインフォウィンドウ（吹き出し）を閉じて削除する。
- インフォウィンドウ（吹き出し）を最初から表示させるためにマップイベントprojection_changedを使ったサンプル
- 複数マーカーから特定のmarkerのインフォウィンドウ（infowindow）を最初から一つだけ表示する
- 外部XMLファイル読み出し＋サイドバー地図でインフォウィンドウ（infowindow）を最初から一つだけ表示する
- ストリートビューの中にインフォウィンドウを表示させる
- サイドバー（sidebar、Markerlist）
- 検索窓（検索ボックス）の地図への埋め込み
- ルート検索（Google Directions API v3）
- ルート検索の基本マップ
- Waypointの設定+ルートディスプレイ
- 通過地点（stopover）の設定（マーカでない経由ポイントを設定）
- preserveViewport（ルート全体を表示させない）
- 合計距離+区間距離をルートディスプレイとは別に地図の外に表示させる
- MarkerClusterer
- MarkerClusterer V3 約1400マーカー+複数カスタムアイコン
- gridSize（グリッドサイズ）：10のサンプル表示
- gridSize（グリッドサイズ）：100のサンプル表示
- gridSize（グリッドサイズ）：200のサンプル表示
- getCurrentPosition+MarkerClusterer – ユーザの現在座標位置を収得する地図サンプル
- watchPosition+MarkerClusterer – ユーザの現在座標位置を収得する地図サンプル
- JQueryを使って複数マーカーを表示させる
- ジオロケータ（現在位置収得）
- navigator.geolocation.currentPosition（一度だけ現在位置座標を収得）
- navigator.geolocation.watchPosition（連続で位置座標を収得）
- getCurrentPosition+MarkerClusterer – ユーザの現在座標位置を収得する地図サンプル
- watchPosition+MarkerClusterer – ユーザの現在座標位置を収得する地図サンプル
- 現在地からのルート検索
- 現在地の追跡ボタン＋追跡停止（watchPosition+clearWatch）
- ｐｈｐ+MySQl
- 1400マーカー表示させてみた。（ブラウザがIE7以下は、地図を広域にすると固まるかも。XMLファイルは、MySQL+PHPで生成）
- Store Locator （ ストアローケータ）+ PHP, MySQL
- Store Locator （ ストアローケータ）+ PHP, MySQL・・・変数で公園のみを指定
- 地図の状態変化イベント（イベントリスナー）によりデータベースから都度マーカーを読み込む。
- google.maps.event.addListener(map, ‘idle’, function()
- google.maps.event.addListener(map, ‘bounds_changed’, function()
- google.maps.event.addListener(map, ‘center_changed’, function()
- google.maps.event.addListener(map, ‘zoom_changed’, function()
- google.maps.event.addListener(map, ‘click’, function()
- google.maps.event.addListener(map, ‘dragend’, function()
- データベースから地図の中心より半径（km）を指定した距離範囲のマーカー（アイコン）を表示するphp+MySQL
- 同じマーカー（アイコン）のデータを読み込まないようにする方法
- iPhone（アイフォン）向け・・・以下のデモを見るには、ブラウザはGoogle Cｈromeを使用して下さい（その理由）。
- サンプル地図トップページ
- アンドロイド”Android” コントロール （地図の拡大・縮小）
- 拡大・縮小用ズームコントロールボタン（地図の拡大・縮小）
- ジオロケータ（現在位置収得）
- イベント＆アイコンのアニメーション
- データベースより半径（km）を指定した距離範囲のマーカー（アイコン）を表示する
- iPhone（アイフォン）用jQTouchを使った地図サイトでクリックイベントを使えるようにする。
- マーカー（アイコン）の表示の高速化、同じデータを読み込まないようにする
- 目的地マーカーをクリックして、ルート検索と距離表示をさせてみる。
- サンプル地図トップページ
- iPhone（アイフォン）向け ｊQtouch+Google Map ※ｊQtouchに若干変更有り、サンプルを逐次作り直します。（ブラウザはGoogle Cｈromeを使用して下さい）
- ImageMapType
- レイヤー
- ポリライン
- マップイベント
- マップイベント（全て）のデモのサンプル地図（mousemoveは除く）
- projection_changed 及びtilesloadedとbounds_changedとcenter_changedのイベント発生状況確認用デモ
- マウスイベント関係（Events; mouseover、click、dblclick、rightclick、mouseout）
- ドラッグイベント(Events； dragstart、drag、dragend）
- 地図の状態変化MVCイベント関連（Events； projection_changed、tilesloaded、bounds_changed、idle、center_changed、dragend）
- データベースからマーカーを読み出すイベント候補（Events；projection_changed、idle、zoom_changed、dragend）
- エレベーション（Elevation API）
- ストリートビュー（streetview）
- ストリートビュー（streetView）を表示する
- マップコネクト+ローカル検索窓
- マップコネクト+アイコン（php MySQL）
- ストリートビューのコネクトマップにマーカー（アイコン）を表示させる。
- ストリートビュー地図（マップコネクト）の外にペグマンの表示位置を切り替えるボタンを設置する
- ストリートビューのコネクトマップにマーカー（アイコン）を表示させる。（MySQLを使った参照用；リンク先記事の中段にストリートビューのマップコネクトを使用しています）
- 座標+ヘディング+ピッチ+を表示（イベント）
- position_changedイベントでペグマンを地図の中心座標に配置
- Street View対応道路をImageMapTypeにより青いハイライトで常に表示させる
- Street Viewと地図を切り替えて表示する／ストリートビューの中にインフォウィンドウを表示させる
