ユーザーにトークンとルートをマップに追加する機会が与えられる例を検討することを提案します。 この例は非常に機能的であり、独自の開発の基礎として使用できます。
マップ上のルートの場合、ノードポイントの位置を変更し、それらを削除して新しいポイントを追加できます。 ノードにマーカーを追加し、それらの説明（マーカー）を設定します。 これはすべて図に見ることができます。
追加されたルートとマーカーに関する情報は、mysqlデータベースに保存されます。 この例では、jqueryと1つのプラグインを使用しました。 これらすべてに加えて、マーカーに関する情報を表示するために、ExtInfoWindowクラス（を参照 ）を使用しました。これにより、標準のGoogleウィンドウの機能が拡張されます。 この記事では、マーカーの操作方法やデータベースとの相互作用の実装方法については詳しく説明しませんが、この機能はすべてこの例で実装されており、希望する人はアーカイブ内のソースコードを見ることができます（記事の最後まで説明します）。
それでは始めましょう。 最初にすることは、カードを置くことです。 ページにid = map_canvasでdivを作成し、javascriptに次のコードを記述します。
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(58.12432, 55.0), 4);
map.setUIToDefault();
map.mode = '';
ここで、マップを作成し、表示の中心と縮尺を設定し、コントロールのセットを追加します。 現在のモードを含むマップのモード変数を設定します（マーカーの追加、マーカーの削除、ルートの追加、ルートの削除の4つのモードが可能です）。
ページにid = add_routeおよびid = del_routeの2つのdiv要素を配置します。 これらは、ルートを追加および削除するためのボタンになります。 それらに2つのハンドラーを割り当てます。
$('#add_route').click(handle_add_route);
$('#del_route').click(handle_del_route);
handle_add_route（）関数で、現在のモードを確認し、ルート構築関数を呼び出します。
if(map.mode !== '') return;
map.mode = 'add_route';
build_route(0,'');
関数build_routeでは、ルートのIDとその座標を渡します。新しいものを作成するため、ゼロと空の文字列を渡します。 次に、線の色、透明度、太さを設定します。
var lineColor = "#CF3A34";
var opacity = .70;
var lineWeight = 2;
ポイント座標は、コンマで区切られた数値のペアです。 座標線-セミコロンで区切られた座標。 座標付きの線が送信された場合、そこからポイントの配列を形成します。 fromUrlValue（）関数を使用して、マップが理解できる形式に変換します。
var line = [];
if(points)
{
var p = [];
newroute = false;
p = points.match(/([0-9.,\-]*)/g);
for(var i=0;i<p.length;i++)
if(p[i]!='')
line.push(GLatLng.fromUrlValue(p[i]));
}
ルートを作成して、描画を開始します。
theroute = new GPolyline(line, lineColor, lineWeight, opacity);
start_drawing(theroute, id, update_route);
ここの3番目のパラメーターは、ルートが変更されたときに呼び出される関数の名前です（update_route（）関数は頂点を読み取り、それらを文字列に変換してサーバーに送信します）。
function start_drawing(poly, id, onUpdate)
{
map.addOverlay(poly);
if(!id)
{
poly.enableDrawing();
editing_route = poly;
}
poly.enableEditing({onEvent: "mouseover"});
poly.disableEditing({onEvent: "mouseout"});
…
ルートをマップに追加します。 これが新しいルート（データベースから追加されただけでなく、作成されたばかりのルート）である場合は、編集可能な状態に設定します。 作成したルートを編集できるように、ルートに2つのハンドラーをハングさせます。
次に、lineupdatedイベントを追加します。これは、ルートが変更されたときに起動しますが、関数を呼び出して、既に完了したルート（データベースから）に対してのみ変更を保存します。
GEvent.addListener(poly, "lineupdated", function()
{
if(id)
update_route();
});
次に、イベントのエンドライン-追加の終了（ルートの最後のポイントをダブルクリック）を切ります。
GEvent.addListener(poly, "endline", function()
{
GEvent.bind(poly, "lineupdated", this, onUpdate);
save_route(poly);
});
このイベントでは、ルート変更ハンドラーを切断して保存します。
最後の手順は、ルートに沿ってクリックハンドラーを追加して、マーカーをその頂点の1つに設定することです。
GEvent.addListener(poly, "click", function(latlng, index)
{
if (typeof index == "number")
{
if(map.mode == 'add_marker')
{
point = poly.getVertex(index);
if(point) save_marker(point);
}
}
});
}
ルートは次のように保存されます。
function save_route(poly)
{
var finish = function(resp)
{
if( check_response(resp) )
{
var id = resp.content;
poly.route_id = id;
routes[id] = {};
routes[id] = {'id': id, 'point':points};
map.mode = '';
}
}
var pointsCount = poly.getVertexCount();
var points = [];
for(i = 0; i < pointsCount; i++)
points[i] = poly.getVertex(i).toUrlValue();
points = points.join(';');
var params = 'action=add_route&points='+points;
$.post(this_url, params, finish, 'json');
}
ここで頂点を取得し、それらを文字列に変換し、リクエストによってajaxサーバーに送信します。 すべてがうまくいった場合、ルートをルートの配列に追加し、編集モードをオフにします。
これで記事を終了できます。主な機能を調べました。 添付の例では、マーカーを使用した本格的な作業が実装されています。 すべては初心者にとっても非常に透明でシンプルです。
ここからサンプルをダウンロードできますhttp://www.filehoster.ru/files/ee8710
自宅でサンプルを実行する場合-GOOGLE_MAPS_APIキーを変更することを忘れないでください。
最後に-アーカイブの構成：
index.php-Ajaxリクエストの処理、データベースからのデータの受信
dump.sql-データベース構造
/css/style.css-ページおよびExtInfoWindowクラスのスタイル
/ img-ExtInfoWindowクラスの画像
/inc/core.php-スクリプト設定、データベースに接続するためのパラメーター、およびphpのいくつかの追加機能
/js/extinfo.js-ExtInfoWindowクラス
/js/jquery-1.3.2.min.js-jquery
/js/jquery.editable.js-テキストを編集するためのjqueryのプラグイン（オンフライ）
/js/script.jsが主な機能です。
/tpl/template.html-マップ付きのページテンプレート