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 を追加するだけっす。