Google Map 2点間で線を引く

Ajax

Google Map APIを利用して、Google Map上で2点間で線を引く

Google Maps Javascript API V3

難しい話ではないのですが、ネット上にある話はちょっと古いものが多かったので、書いておきます。
2点だけでなくても、いくつでも複数の点の間を線が引けます。
とっても簡単です。

公式ページ Polyline
http://code.google.com/intl/ja/apis/maps/documentation/javascript/overlays.html#PolylineOptions

から抜粋

 //Google Mapの初期化
 function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var myOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
 
 //Mapの作成
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
 
 //線を引きたい地点を、flightPlanCoordinatesという配列に、
 //google.maps.LatLngを作って格納します。
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  
  //ポリラインをMapにセットします。
  flightPath.setMap(map);
 }
カテゴリーAjax

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です