Google Maps API で、地図上に経路 / ルート (パス) を表示する

これは、Perl で、Goolge Maps からルートを検索する方法に対するブラウザ側の処理の例である。以下のコードを参考にして欲しい。repaint メソッドの中でパスを描画している。前提としては以下の通り。

このスクリプトは呼び出し元の HTML から your_ajax_script.js としてリンクされている。
このスクリプトが呼ばれる HTML には、
があるとする。
init メソッドは、HTML の onLoad から呼ばれるものとする。

your_ajax_script.js の例


//<![CDATA[

var BASE_URL = 'https://yourdomain.com';
var CGI_FILE = '/path_to_cgi_dir/your.cgi';
var DEFAULT_ZOOM = 5;

var map;
var currentPoint;

// init は、HTML の onLoad から呼ばれるものとする。
function init() {

<pre>currentPoint = new GPoint(-122.13930130004883, 37.40248284497232);
map = new GMap(document.getElementById('map'));

GEvent.addListener(map, 'moveend', function() {
    // add your code here
});

GEvent.addListener(map, 'click', function(o, p) {
    // add your code here
});

GEvent.addListener(map, 'infowindowopen', function() {
    // add your code here
});

GEvent.addListener(map, 'infowindowclose', function() {
    // add your code here
});

map.setMapType(G_MAP_TYPE);
map.centerAndZoom(currentPoint, DEFAULT_ZOOM);
map.addControl(new GLargeMapControl()); 
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
}

function repaint(xml) {

var list_html = '';

if(xml) {

    // IE の場合はより厳密にチェックが必要、Firefox は xml だけでよい
    if(xml.documentElement) {

        var path = xml.documentElement.getElementsByTagName('path');

        var points = [];
        for (var i = 0; i < path.length; i++) {
            points.push(new GPoint( path[i].getAttribute('lng'),
                                    path[i].getAttribute('lat')));
        } // End of for

        var route = xml.documentElement.getElementsByTagName('route');
        list_html += route.length > 0 ? '<ol>' : '';
        for (var i = 0; i < route.length; i++) {
            list_html += '<li>' + route[i].getAttribute('description') + '</li>';
        } // End of for
        list_html += route.length > 0 ? '</ol>' : '';
    }
}

// このスクリプトが呼ばれる HTML には、<div id="list"></div> があるとする。
document.getElementById('list').innerHTML =  list_html;
map.addOverlay(new GPolyline(points));
}

// getPath メソッドは、マウスでボタンが押された、などのイベントに反応する
function getPath(lng, lat) {

currentPoint = new GPoint(lng, lat);

post(    'do=path'
    +    '&toX=' + lng
    +    '&toY=' + lat);
}

// post メソッドは、例えば getPath メソッドから呼ばれる
function post(data) {

var xmlHttp = GXmlHttp.create();

xmlHttp.onreadystatechange = function() {

    if (xmlHttp.readyState == 4) {
        var xml = xmlHttp.responseXML;
        repaint(xml);
    }
}

xmlHttp.open('POST', BASE_URL + CGI_FILE, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(data);
}

//]]>

Google Maps API で、地図上に経路 / ルート (パス) を表示する

Comments

Perl で、Google Maps からルートを検索する方法