Googleマップのルート案内APIをv3で使う

仕事で、ルート案内ができるAPIがないか調べて実装してほしいとのことだったので、調べてみたらGoogleマップにあるというのが分かった。その時見つけたのが下記の記事。
ASCII.jp：Googleマップ待望の新機能「ルート案内API」の使い方

GDirectionsというオブジェクトを使うらしい。v2でしか使えないようだけど、まあいいだろうと思って実装。
　ただ、v3でしか実装されていない交通状況のAPI(Google Japan Blog: 交通状況がGoogle マップで見られるようになりました)も使いたいとのことだったので、v2とv3のAPIを両方使うということなのだけれども、どうにも衝突してしまってうまく動かない。

困ったなぁ。と思いながらもう少し調べてみると、v3にはgoogle.maps.DirectionsServiceという似たようなオブジェクトがあると知る。
Maps API V3 サービス – Google Maps API Version3 日本語ドキュメント(非公式)

というわけで、梅田を出発し、途中、難波により、天王寺まで行くプログラムを作ってみることに。

var directionDisplay;
var directionsService = new google.maps.DirectionsService(); // 地図表示用
var map;

  directionsDisplay = new google.maps.DirectionsRenderer(); //　ルート案内
  var myOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP, // 普通の2D表示
  }
  map = new google.maps.Map(document.getElementById("map2"), myOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("route2"));

  
  var start = "梅田駅";
  var end = "天王寺駅";
  var request = {
    origin:start, // 出発地
    destination:end, // 目的地
	waypoints:[{location:"難波駅"}], //　途中経路
    travelMode: google.maps.DirectionsTravelMode.DRIVING // 車で
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response); // 描画
    }
  });

WordPressに貼ると、他のCSSに影響を受けて表示が少し変になってしまっていますが、なんとか表示できました。