Google Maps APIs のコントロール変更で変わったこと (v3.21→v3.22)

6749 ワード
library Control versioning JavaScript GoogleMapsAPI JavaScript テキストリンク

Google Maps APIを利用していて見た目が変わったと思ったので、Google Developerサイトを少し調べてみたところ、3.22へのアップグレードのタイミングでコントローラのデフォルトが変更になった模様。よりモバイルでの操作を意識して改良しているように感じました。
Googleマップのコントローラとの親和性もあるので、しばらくすれば見慣れると思われます。

新しいコントローラは、Jsライブラリ呼び出しのEndpointにv=3.expやv=3.22などのパラメータを指定することで使用できます。

<script src="https://maps.googleapis.com/maps/api/js?v=3.22&signed_in=true&language=Ja&region=JP"></script>


Version 3.21以前で描画した場合のコントロール（サンプルコード）


変更後（Version 3.22）のイメージ（サンプルコード）

サンプルコード内にも記載しましたが、Versionにv=3.21と指定するか、以下の1行をイニシャライズ前に加えることで旧コントローラに戻せます。今後のバージョンアップ予定は明らかではないものの、おそらく3.21が完全になくなるまで（今のペースだと、おそらく2016年の中頃の予想）は利用出来ると思います。

google.maps.controlStyle = 'azteca'

念のため上記を含んだコードを以下に追加します。面白いのは、仮にV=3.22と指定しても、'azteca'のパラメータが勝り旧コントローラとなる点です。

sample.html
<!DOCTYPE html>
<html>
  <head>
  <meta name="description" content="Ver3.21のコントロールイメージ">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Symbol with label</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.21&language=ja&region=JP&signed_in=false"></script>
    <script>

  function initialize() {
    var mapOptions = {
      zoom: 10,
      center: new google.maps.LatLng(35.66, 139.7),
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  var marker = new google.maps.Marker({
          label:'A',
          position: map.getCenter(),
          icon: {
            path: google.maps.SymbolPath,
            scale: 5,
           },
          draggable: true,
          map: map
   });
  //しばらくの間このパラメータを追加することで、バージョン管理とは関係なく旧コントローラに戻せる
    google.maps.controlStyle = 'azteca'
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

カスタムコントロールを使用したWebサイトを作っている方はそのタイミングまでに改修が必要になるかもしれないので、要チェックですね。