CSV データを JS maps v3 で利用する

CSV データを JS maps v3 で利用する

[緯度,経度] データを使って、maps JS v3 で Polyline を引く　　 (static maps はこちら　　csv ファイルの読み込みはこちら) [緯度,経度] の CSVデータを用意します。　参考 Polyline データとして、[緯度,経度] 列に整形します。 var point = [ [35.337244,139.545324], [35.336955,139.545002], ・・・・・・・ [35.318915,139.550850], [35.319020,139.550474] ]; [緯度,経度] データ列を maps の Polyline データとして取り込み、ページファイルを作ります↓ 　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" > <meta http-equiv="Content-Style-Type" content="text/css" > <title>CSV データをJS V3 で利用する-１</title> <style type="text/css"> <!-- .title1 { padding: 3px 10px; margin: 0px; font-size:1.5em; } // --> </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&key=【API キー】"></script> <script type="text/javascript"> <!-- var infoWindow = new google.maps.InfoWindow(); function initialize() { var myOptions = { zoom: 14, center: new google.maps.LatLng(35.3282,139.553843), } var mapObj = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // ラインを引く座標の配列 var point = [ [35.337244,139.545324], [35.336955,139.545002], [35.334444,139.547749], [35.333945,139.548908], [35.333463,139.549584], [35.332851,139.550034], [35.332422,139.550227], [35.331940,139.550635], [35.331608,139.551139], [35.331188,139.552148], [35.330951,139.552513], [35.329323,139.553639], [35.329192,139.553843], [35.328842,139.554626], [35.327905,139.555989], [35.327520,139.556203], [35.327082,139.556128], [35.326566,139.555806], [35.326216,139.555377], [35.324325,139.553843], [35.323625,139.555045], [35.319764,139.552663], [35.318863,139.552116], [35.318915,139.550850], [35.319020,139.550474] ]; var points = [ ]; for ( var i = 0; i < point.length; i++) { var station1 = new google.maps.LatLng( point[i][0], point[i][1] ); points.push (station1); // ライン接続配列を作成 var polyLineOptions1 = { path: points, strokeWeight: 3, strokeColor: "#0000ff", strokeOpacity: "0.7" }; } // ラインを設定 var poly1 = new google.maps.Polyline(polyLineOptions1); poly1.setMap(mapObj); } window.onload = initialize; // --> </script> </head> <body background="../img/p_bcg007.gif" style="text-align: center; margin: 0; padding: 0;"> <div class="title1">CSV データをJS V3 で利用する-１</div> <div id="map_canvas" style="width: 500px; height: 360px; margin: 0 auto;"></div> </body> </html> [緯度,経度] の CSVデータを取り込んだ地図が表示されます↓ 　　 [緯度,経度] データをエンコードして、javascript maps で経路線を引く　　参考エンコーデッドデータを JavaScript API で使う ( polyline encoding )
位置情報 topページ/ 　ロガーを利用/ 　static maps で利用/ 　JS maps v3 で利用/