Geolocation APIを利用して、現在地を中心とした地図を表示させる

表示する地図の中心を現在地にします。
Geolocation APIを利用しますが、Geolocation APIはGoogle Masp APIではなく、HTML5のAPIです。
詳細な仕様については、以下のサイトを参照して下さい。
Geolocation API Specification 2nd Edition

サンプルは、例によってGitに置いてあります。
my_location.html

地図の初期表示

        /* initial point to show the map */
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.681084, lng: 139.767617},
          zoom: 15
        });

例によって、東京駅の位置を指定しています。

ブラウザがGeolocation APIに対応しているかのチェック

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          // Geolocation APIサポート時の処理を記述。後述。
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }

ブラウザが非サポートで荒れば、エラーメッセージを表示させます。handleLocationErrorの処理の説明は割愛します。詳細はサンプルを参照して下さい。

Geolocation APIサポート時の処理

         navigator.geolocation.getCurrentPosition(function(position) {

APIがサポートされていれば、getCurrentPosition()メソッドを利用して現在位置を取得します。

現在位置の取得に成功

            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Found you!');
            map.setCenter(pos);

取得できた位置情報を元に地図を再描画します。また、現在地上に"Found you!(見つけた)"というポップアップを合わせて表示させています。

現在位置の取得に失敗

          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());

非サポート時と同じく、エラーメッセージを表示させます。また、以下の様にオプションでエラーコードを取得できます。必要であれば、エラーコードを参照して適切なメッセージを表示させるなどの処理を実行して下さい。

          }, function(error) {
            alert( error ) ;

なお、エラーコードの定義は以下の仕様を参照して下さい。
5.5 PositionError interface

Why it doesn't work?

作業のメモ、記録をブログに残しています。