◆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と地図を切り替えて表示する／ストリートビューの中にインフォウィンドウを表示させる
スポンサードリンク
①左側にストリートビュー、右側に地図(青のハイライト付き)を表示する。
②右側の地図で出発地と目的地を指定し、ルート検索する。
もしストリートビュー不可の道路を通ったら、waitpointを追加し、ルート修正する。
③次に、ｘｘボタンをクリックすると、出発点から目的地までマーカーが自動走行し
それに合わせてストリートビューが追尾する。
————————————————————————————-
①と②は何とか実現できそうですが、③が実現できなくて、今はマウスをクリック
しながらルートの事前確認などをしていますが、結構面倒なので、できるものなら
自動走行できないかと、勝手な希望を抱いています。
@でにす さん
申し訳ありません。変わりにV2時代のものですが、個人で楽しむには十分かと思いますので紹介します。参考にされて下さい。こちら→http://waox.main.jp/news/?p=2851
すごく参考になっております。
教えていただきたいのですが、「マップコネクト+ローカル検索窓」のところで、
あらかじめ”目的地を固定して”マップ上に表示させておきたいのですがどのようにすればよろしいでしょうか？
特に検索窓はなくても構いません。
@豪力 さん
新しく記事を書いておきました。サンプルもUPしておきました。参考になればいいのですが。
初心者ですが参考にさせて頂いています。
「100%画面表示用ドライブルート検索」ですが、
map内に複数のマーカーを表示させることは出来ますか？
色々試してみたのですが駄目です。
Kakasiさん
記事を書いておきました。試してみてください。