地図をクリックして、エンコード化されたポリラインを貼り付ける方法が、地図に線を描く方法としては便利そうです。
今回は、そのポリラインをエンコード化する方法ためのツールとして、Google先生のデモマップをいじって自分好みに使いやすいように直しておきます。
地図をクリックしてポリラインを描いた後にアイコンを移動させたり、削除しても逐一エンコードされたポリラインが表示されるように変更してみました。
スポンサードリンク
Tag Archives: 地図
Google Adsense グーグルアドセンスを地図の中に表示する方法
Posted by 管理人 on 2012年11月4日
1 comments | 1,876 views
Google Mapデモ
Posted by 管理人 on 2012年5月5日
10 comments | 90,469 views
◆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と地図を切り替えて表示する／ストリートビューの中にインフォウィンドウを表示させる
今度はアイコン（マーカー）を地図に表示＋XMLファイルデータ読み込み／Google Maps JavaScript API V3
Posted by 管理人 on 2010年10月16日
None comments | 11,513 views
マーカー（アイコン）を表示させるのであれば、複数のマーカーを表示させたい。
ｖ2でPHP+MySQLが使えないときに、XMLファイルから読み込んだ手を試してみる。
参照ページ；Google グルーディスカッションのサンプルより
◆Google Maps V3 XMLファイルからのマーカー+インフォウィンドウ読み込み
- Head内にutil.jsファイルを指定。ダウンロードは、GooglMaps のサンプルコードのページから。
- 名前や座標データを記述したXMLファイルを用意。サンプル（ソースを見るで確認）
ナビゲーションコントロール、マップタイプコントロール、距離スケールコントロールを表示する標準マップ
Posted by 管理人 on 2010年10月16日
1 comments | 6,507 views
ともかくGoogle Maps API v3でともかく地図を表示させてみよう。 Google Map JavaScript API V3 チュートリアルにあるGoogle マップ V3 の「Hello, Woｒld」を表示させてみることに。
◆Google Maps V3 Hello World
うーん。APIキーが無いのがいいですね。 あと目立つのは、コントローラ近くのストリートビューのアイコン。 スマートフォン、iPhone（アイフォン）用の位置情報取得用にセンサーの使用有無を示すための sensor パラメータの設定が出来るようになっています。 それでは、初期表示の座標を東京あたりに変更して・・・・。
まずあとで、ブログ等で使うことを考えて、bodyイベントのinitialize();は、scriptの中へ。jsファイルは共通で使いたいので、個別に指定する地図タイプ、初期表示座標、ズームは、別のscriptに分けておく。マップタイプは、4つのタイプから選択。
Google Map（地図）にアイコン（マーカー）を表示させる。
Posted by 管理人 on 2010年10月13日
None comments | 1,501 views
地図を表示させることが出来たら、こんどはマーカー（アイコン）を表示させてみましょう。
var markerでアイコンを表示させます（朱書き部）。座標（経度、緯度）は東京タワー、座標収得はコチラ。
◆記述
1）Head文
マップ初期表示の地図種類を変更する
Posted by 管理人 on 2010年5月14日
None comments | 1,535 views
◆Google Maps APIで地図に初期表示させるマップの種類を変えてみる。 scrptの記述を変更するだけ
標準：
map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_NORMAL_MAP);
航空写真：
map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_SATELLITE_MAP);
航空写真＋地図：
map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_HYBRID_MAP);
地形：
map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_PHYSICAL_MAP);
Earth：
map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_SATELLITE_3D_MAP);
ホンダ カーナビ インターナビでGoogle Mapローカル検索の提供サービス開始
Posted by 管理人 on 2010年4月22日
None comments | 1,193 views
スポンサードリンク
