Google Maps API V3で、google.maps.Polylineを使って、地図上の直線コースではなく、最短航路となる大圏コースの円弧を描いてみるサンプルプログラム。成田空港とロサンゼルス空港を結んでみます。青が大圏コース、赤がメルカトル図法上の直線コース。
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script> <div id="map" style="height: 400px;"></div> <script type="text/javascript"> google.maps.event.addDomListener(window, "load", function() { var NRT = new google.maps.LatLng(35.763889, 140.391667); var LAX = new google.maps.LatLng(33.9425, -118.408056); var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(34, -170), zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP }); // メルカトル図法上での最短距離(普通のPolyline) new google.maps.Polyline({ path: [NRT, LAX], map: map, strokeColor: "red" }); // 大圏コース(地球上での最短距離) new google.maps.Polyline({ geodesic: true, path: [NRT, LAX], map: map, strokeColor: "blue" }); }); </script>
PolylineOptionsに geodesic: true を追加するだけっす。