4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-09-24

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>

Screen Shot 2015-09-24 at 14.21.45.png
Version 3.21以前で描画した場合のコントロール(サンプルコード

Screen Shot 2015-09-24 at 14.11.58.png
変更後(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サイトを作っている方はそのタイミングまでに改修が必要になるかもしれないので、要チェックですね。

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?