Google Maps API V3への移行 - AdSense実験室

Google Maps API V3への移行

2013-11-11

Google Mapsサポートチームから「GoogleMapのAPIバージョン2は2013年11月19日で終わっちゃうよー。まだV2使ってる人は早くV3に移行してね」っていうメールが。 そういえば5年ほど前に作った地図系サイトがまだV2のままでした。

このまま何もしないで11月19日過ぎちゃったらどうなるのか。 その日を境に突然地図が表示されなくなる、というわけではなくて、V2とV3をつなぐJavaScriptで対処可能とのこと。 もっともそれで100%問題ないとはいえないし、実際のところ何が起こるか分からないので、できることならV3対応に切り換えておいた方がいいですよ、ということらしい。

まあ問題起きてからバタバタするのも嫌なので、この際V3に移行することにしました。

APIキーを取得する

こちらのGoogle Maps API V3 スタートガイドを参考に作業開始。 ふむ、まずは「APIキー」というものが必要なようですね。

ネットの情報を調べていると、「V3からAPIキーは不要になった」という記述をちらほら見かけました。V3切り替え当初はそうだったのかもしれませんが、現在はやはり必要になっているみたいです。 (「Business デベロッパー」だけは不要)

APIキーの取得は大して難しくありません。先ほどのスタートガイドの説明手順に従って操作するだけです。 まずはGoogleアカウントでログイン。「Services」のメニューで表示される一覧をスクロールして「Google Maps API v3サービス」をONにします。

Google Maps API v3サービス

これでAPIキーが取得できるようになります。

APIキー

APIキーは後でHTMLコーディングの際に必要になるので、忘れないようにメモ帳などにコピペしておきましょう。

ヘッダでGoogle Maps API を読み込む

HTMLのヘッダ部に

<html>
  <head>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>

この一文を記述。「YOUR_API_KEY」のところに先ほどコピペしたAPIキーが入ります。最後の「SET_TO_TRUE_OR_FALSE」のところも忘れずに。モバイルの位置情報を使う場合は「TRUE」、不要なら「FALSE」と記述します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Google Maps</title>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=APIキー?sensor=false"></script>
        <script type="text/javascript">
            google.maps.event.addDomListener(window, 'load', function() {
            var mapdiv = document.getElementById("gmap");
            var myOptions = {
            zoom: 12,
            center: new google.maps.LatLng(緯度, 経度),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true,
            };
            var map = new google.maps.Map(mapdiv, myOptions);
        });
        </script>
    </head>
    <body>
        <div id="gmap" style="width : 500px; height : 600px;"></div>
    </body>
</html>

全体の記述としてはこんな感じになります。 ただしこれはあくまでいちばんシンプルな例。実際はもうちょっと込み入った処理を行っているでしょうから、V3で変更になった部分をよく確認して移行作業を行う必要があります。 上の例だけ見ても、地図のインスタンス作成でこれまで「new GMap2()」と記述していた部分が「new google.maps.Map()」に変更になっていたり、V3でけっこう大きなルール変更が行われていますので要注意。 私も当初の見積りより多く時間がかかってしまい、思ったより大変な作業となりました。

ところでこのV3。スマホなんかにも対応しているようなので、レスポンシブWebデザインと絡めて何か面白いことができそうな予感。 こんど時間のあるときにちょっと新しい地図サイトにでも挑戦してみようと思います。

スポンサーリンク