google MAPに夏休みキャンピングカーで北海道を回った軌跡をプロットしてみた

2016年9月6日

旅行の記録とすごーく長距離移動したのでその可視化に行ったスポットをgoogleMapでプロットしてみました

環境

  • Chrome(html/css/js)

googleMapの描画

<!DOCTYPE HTML>
<html lang="ja">
<head>
 <title>sample</title>
 // APIの読み込み
 <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
 <style type="text/css">
    body{
        margin:0;
        padding: 0;
    }
    #map {
        width: 1280px;
        height: 800px;
        margin: 0 auto;
    }
 </style>
</head>
<body>
 <div id='map'></div>
</body>
</html>

まずhtmlから。APIとあとから地図を描画するスペース<div id='map'></div>をつくって

//地図の描画
var $map = new google.maps.Map(document.getElementById("map"), {
    center: {lat: 00.000, lng: 000.000}, //地図の中心
    zoom:10, //ズーム
});

地図を描画します。

// マーカーの描画
 var marker = new google.maps.Marker({
    position: {lat: 00.000, lng: 000.000}, //マーカーの緯度経度
    map: $map // マーカーを描画するマップの指定
 });

で、マーカーのピンを描画します

//経路探索オブジェクト
var $directS = new google.maps.DirectionsService();
// ラインの色設定とか
var $lineOptions = {
 polylineOptions: { strokeWeight: 8, strokeColor: "#04F", strokeOpacity: 0.6 },
 markerOptions: { visible: false }
};
// ルートの描画
var route = function(){
 var request = {
  origin: {lat: 00.000, lng: 000.000}, //スタート地点
  destination: {lat: 00.000, lng: 000.000}, //ゴール地点
  travelMode: google.maps.DirectionsTravelMode.DRIVING // 移動手段
 };
 $directS.route(request, function(response, status){
  if (status == google.maps.DirectionsStatus.OK){
   renderer = new google.maps.DirectionsRenderer(); 
   renderer.setMap($map); //描画するマップの指定
   renderer.setOptions( $lineOptions ); //描画するラインの設定
   renderer.setDirections( response ); //ラインの描画
  }
 });
}

で、マーカーとマーカーの2点間の経路を描画します。

仕上げ

Direction Serviceの制約が10回/秒だったり、地図を画面一杯に表示したり、吹き出しつけたり、マーカーのピンにナンバリングしたり、スポットの緯度経度情報つくったり、で色々調整して以下の様な感じで完成です!

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <title>北海道でっかいどー☆の旅</title>
    <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
    <style type="text/css">
        body{
            margin:0;
            padding: 0;
        }
        #map {
            width: 1280px;
            height: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id='map'></div>

<!-- マップ描画用JS -->
<script type="text/javascript">
(function(){
var labelNum = 1;
// [ name, lat, lng,] マーカー情報
var points = [
['新千歳空港', 42.792594, 141.670479 ],
['モエレ沼', 43.129551, 141.431492 ],
['奥芝商店 白石オッケー丸', 43.074403, 141.41526 ],
['ひまわりの里', 43.750313, 141.87581 ],
['旭川ビジネスホテル', 43.767037, 142.36051 ],
['旭山動物園', 43.768317, 142.480209 ],
['大黒屋(ジンギスカン)', 43.7689747, 142.3573686 ],
['旭川市博物館', 43.7594141, 142.3484489 ],
['道の駅 ライスランドふかがわ', 43.699464, 142.070689 ],
['道の駅 おびら鰊番屋', 44.13715, 141.655105 ],
['道の駅 富士見 「とんがりかん」', 44.714269, 141.79298 ],
['宗谷岬', 45.523023, 141.936616 ],
['日本最北のお土産屋さん えぞや', 45.52279, 141.936584 ],
['卸売スーパー ユアーズ', 45.411081, 141.675187 ],
['稚内森林公園', 45.411964, 141.669288 ],
['風車の下でBBQ', 45.41861, 141.669113 ],
['稚内温泉童夢', 45.421204, 141.637587 ],
['パッチワークの丘', 43.625843, 142.437335 ],
['ケンとメリーの木', 43.609045, 142.464061 ],
['セブンスターの木', 43.629054, 142.431068 ],
['北西の丘展望公園', 43.604479, 142.459039 ],
['しらひげの滝', 43.474687, 142.639396 ],
['不動の滝', 43.4751831, 142.6281649 ],
['富良野マルシェ', 43.342355, 142.387302 ],
['すずらん大橋付近河川敷', 42.94115, 143.166433 ],
['十勝川散策', 42.945323, 143.167195 ],
['勝毎花火大会', 42.940698, 143.168284 ],
['オベリベリ温泉', 42.927796, 143.222548 ],
['道の駅 摩周温泉', 43.492226, 144.447832 ],
['摩周湖第一展望台', 43.55579, 144.507249 ],
['摩周第三展望台', 43.583249, 144.503863 ],
['神の子池', 43.645055, 144.550282 ],
['オシンコシンの滝', 44.038049, 144.935455 ],
['番屋(一休屋行きたかったorz)', 44.070393, 145.000754 ],
['オロンコ岩', 44.073693, 144.990482 ],
['知床五湖', 44.121923, 145.081034 ],
['知床峠', 44.054497, 145.104718 ],
['道の駅 知床・らうす', 44.01746, 145.192157 ],
['はまなすレストラン', 42.954764, 144.077935 ],
['浦幌町共同浴場', 42.812755, 143.658548 ],
['メム メドゥズ', 42.468741, 143.377162 ],
['豚飼い人の豚丼', 42.91772, 143.161837 ],
['新千歳空港', 42.792594, 141.670479 ],
['弟子屈ラーメン', 42.787947, 141.680293 ],
];

//経路探索オブジェクト
var $directS = new google.maps.DirectionsService();

// ラインの色設定とか
var $lineOptions = {
 polylineOptions: { strokeWeight: 8, strokeColor: "#04F", strokeOpacity: 0.6 },
 markerOptions: { visible: false }
};

// 中心位置用の緯度経度のデータ作成
var mapCenterLatLng = new google.maps.LatLng({lat: points[0][1], lng: points[0][2]}); 

//地図オブジェクト
var $map = new google.maps.Map(document.getElementById("map"), {
    center: mapCenterLatLng,
    zoom:4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

//インフォウィンドウオブジェクト
var $infoW = new google.maps.InfoWindow();

//各ポイントのマーカー作成処理
var createMarker = function(pt){
 var marker = new google.maps.Marker({
    position: pt[3],
    icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+labelNum+"|ff7777|000000",
    map: $map
 });
 google.maps.event.addDomListener(marker, "click", (function(p){
  return function(){
   $infoW.setContent(p[0] + "<br>( " + p[1] + ", " + p[2] + " )");
   $infoW.setPosition(p[3]);
   $infoW.open($map);
  }
 })(pt));

 return marker;
}

//経路表示処理(1リクエスト最大10ポイント)
var route = function(){
 var renderer = null, wayP = [];
 var p1 = points[pointIndex];
 var j, n = pointNum - pointIndex - 2;

 if(n>8) n = 8;
 var endIndex = pointIndex + n + 1, p2 = points[endIndex]; 
 for(j=pointIndex+1; j<endIndex; j++) wayP.push({
  location: points[j][3], stopover: true
 });
 pointIndex = endIndex;

 var request = {
  origin: p1[3],
  destination: p2[3],
  waypoints: wayP,
  travelMode: google.maps.DirectionsTravelMode.DRIVING
 };
 $directS.route(request, function(response, status){
  if (status == google.maps.DirectionsStatus.OK){
   renderer = new google.maps.DirectionsRenderer();
   renderer.setMap($map);
   renderer.setOptions( $lineOptions );
   renderer.setDirections( response );
  }
 });
 if(pointIndex < pointNum - 1) setTimeout( route, 101);
}


//メイン処理
var pointIndex = 0, pointNum = points.length;
var i, p = points[0];
var mBound = new google.maps.LatLngBounds(
  { lat: p[1], lng: p[2] }, { lat: p[1]+0.05, lng: p[2]+0.05 }
);
for(i=0; i<pointNum; i++){
  var p = points[i];
  p[3] = new google.maps.LatLng(p[1], p[2]);
  mBound = mBound.extend(p[3]);
  p[4] = createMarker(p);
  labelNum++;
}
$map.fitBounds(mBound);
route();

})();

//マップのスクリーン全画面表示
function fullScreen(i){
    var target_id = document.getElementById(i)
    var wW = window.innerWidth;
    var wH = window.innerHeight;
    target_id.style.width = wW + "px";
    target_id.style.height = wH + "px";
}

window.onload = function(){
    fullScreen('map');
}
window.onresize = function(){
    fullScreen('map');
    console.log('windowResize');
} 
</script>
</body>
</html>

最後に

デモページ
いやぁーあらためて見るとたった5日でホントによく動いたな〜!www 走行距離2000kmくらい?自由気ままにいきたいトコロを目指してひた走るのはメッチャ楽しいのでオススメです。興味があるかたは是非!ちなみに北海道にはたくさんキャンピングカー走ってて意外とポピュラーなのだな。と。ボクもまたキャンピングカーで旅行にいきたいなーと思います。

参考

  • http://waox.main.jp/news/?p=2124
  • http://oshiete.goo.ne.jp/qa/9095155.html
  • https://syncer.jp/google-maps-javascript-api-matome
  • https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja
  • https://developers.google.com/chart/image/docs/gallery/dynamic_icons