Google Map サンプルデモマップ一覧
◆Google Maps JavaScript API V3 Example(Demo)一覧
※本ページのiPhone(スマートフォン端末)用デモを見るには、ブラウザはGoogle Chromeを使用して下さい。
- はじめに
- アイコンとインフォウィンドウ
- コントロール
- マーカー(アイコン)の配列についての検証(2次元配列を理解してみる)
- Google Adsense グーグルアドセンス
- 複数マーカーを配列から読み込むサンプル
- 外部XMLファイルからアイコン(マーカー)データ読み込み
- マーカー(アイコン)
- kmlファイル(アイコンとレイヤー)
- インフォウィンドウ(infowindow)
- Youtube動画を吹き出し(インフォウインドウ)に表示するサンプル
- インフォウィンドウ(吹き出し)を地図の中心座標に表示させるpanTo()を使ったサンプル
- 地図をドラッグしたらマーカーのインフォウィンドウ(吹き出し)を閉じて削除する。
- インフォウィンドウ(吹き出し)を最初から表示させるためにマップイベントprojection_changedを使ったサンプル
- 複数マーカーから特定のmarkerのインフォウィンドウ(infowindow)を最初から一つだけ表示する
- 外部XMLファイル読み出し+サイドバー地図でインフォウィンドウ(infowindow)を最初から一つだけ表示する
- ストリートビューの中にインフォウィンドウを表示させる
- サイドバー(sidebar、Markerlist)
- 検索窓(検索ボックス)の地図への埋め込み
- ルート検索(Google Directions API v3)
- ルート検索の基本マップ
- Waypointの設定+ルートディスプレイ
- 通過地点(stopover)の設定(マーカでない経由ポイントを設定)
- preserveViewport(ルート全体を表示させない)
- 合計距離+区間距離をルートディスプレイとは別に地図の外に表示させる
- MarkerClusterer
- MarkerClusterer V3 約600マーカー+複数カスタムアイコン
- gridSize(グリッドサイズ):10のサンプル表示
- gridSize(グリッドサイズ):100のサンプル表示
- gridSize(グリッドサイズ):200のサンプル表示
- getCurrentPosition+MarkerClusterer – ユーザの現在座標位置を収得する地図サンプル
- watchPosition+MarkerClusterer – ユーザの現在座標位置を収得する地図サンプル
- 100%画面表示用ドライブルート検索+MarkerClusterer
- JQueryを使って複数マーカーを表示させる
- ジオロケータ(現在位置収得)
- navigator.geolocation.currentPosition(一度だけ現在位置座標を収得)
- navigator.geolocation.watchPosition(連続で位置座標を収得)
- getCurrentPosition+MarkerClusterer – ユーザの現在座標位置を収得する地図サンプル
- watchPosition+MarkerClusterer – ユーザの現在座標位置を収得する地図サンプル
- 現在地からのルート検索
- 現在地の追跡ボタン+追跡停止(watchPosition+clearWatch)
- php+MySQl
- 700マーカー以上を表示させてみた。(ブラウザが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 Chromeを使用して下さい(その理由)。
- サンプル地図トップページ
- アンドロイド”Android” コントロール (地図の拡大・縮小)
- 拡大・縮小用ズームコントロールボタン(地図の拡大・縮小)
- ジオロケータ(現在位置収得)
- イベント&アイコンのアニメーション
- データベースより半径(km)を指定した距離範囲のマーカー(アイコン)を表示する
- iPhone(アイフォン)用jQTouchを使った地図サイトでクリックイベントを使えるようにする。
- マーカー(アイコン)の表示の高速化、同じデータを読み込まないようにする
- 目的地マーカーをクリックして、ルート検索と距離表示をさせてみる。
- サンプル地図トップページ
- iPhone(アイフォン)向け jQtouch+Google Map ※jQtouchに若干変更有り、サンプルを逐次作り直します。(ブラウザはGoogle Chromeを使用して下さい)
- 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と地図を切り替えて表示する/ストリートビューの中にインフォウィンドウを表示させる