Google Map API Ver.3 対応

前回3月21日に「ひろあき氏」の「GPX Viewer」をそっくり真似して、生のGPXデータを軌跡として表示するようにしたが、過去の山はGPXデータがない山もある。
また、せっかく苦労して作ったエンコードポリライン用の64進数のデータがあるのにそれを廃止するのは勿体ないような気がする。

Ver.3 には、たった1行でエンコードしたデータをデコードして元の配列に戻す関数が用意されているので、それを使わない手もあるまい。
新しく買った参考書「Google Maps API プログラミング入門 改訂2版」のサンプルコードを参考に下記を書きあげた。
これにマーカーを表示する機能を追加すれば良い。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Google Map ポリライン描画</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function initialize() {
        //表示範囲を設定
        var sw = new google.maps.LatLng(minlat, minlng);
        var ne = new google.maps.LatLng(maxlat, maxlng);

        //地図を作成
        var mapDiv = document.getElementById("map_canvas");
        var mapOptions = {
            mapTypeId : google.maps.MapTypeId.TERRAIN
        };
        var mapCanvas = new google.maps.Map(mapDiv, mapOptions);

        //領域に合うように地図を表示
        var bounds = new google.maps.LatLngBounds(sw, ne);
        mapCanvas.fitBounds(bounds);

        //エンコード化された軌跡(64進数のものすごく長い文字列、64進数の文字にはASCII 0x20 から64文字使用している)
        var encodedPath = "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";

        //デコードして(緯度経度の配列に戻す)ポリラインを描く
        var points = google.maps.geometry.encoding.decodePath(encodedPath);
        var polylineOpts = {
            path: points,
            strokeWeight : 3,
            strokeColor : "#ff0000",
            strokeOpacity : 0.5,
            map : mapCanvas
        };
        var poly = new google.maps.Polyline(polylineOpts);
    }
    google.maps.event.addDomListener(window, "load", initialize);
    </script>
    <style type="text/css">
    html, body, #map_canvas {
        width : 100%;
        height : 100%;
        margin:  0;
        padding : 0;
    }
    </style>
</head>
<body>
	<div id="map_canvas"></div>
</body>
</html>
データ
  • 2013.05.07(火)
アーカイブ

現在位置: ホームなんでも日記メニュー > このページ