Google Map API V3で、現在地を地図上に表示する

前回Geolocationを使い、現在地の座標を取得しました。
前回の記事はこちらを参照ください「HTML5とGoogle Map API V3を使って現在地を地図に表示する

 

今回は前回取得した位置情報を元に地図上に表示を行います。

 

特徴

 

例えば、会社の地図を表示したときに、今いる現在地からの距離を表示したり、人に位置情報を送り待ち合わせに使ったりと、いろいろと便利そうですよね。

  • Google Map API V3を使い地図を表示します。
  • 地図上に現在地を表示するので、様々なWebアプリケーションに使用可能。

サンプル」はこちらより参照ください。

 

方法

 

  1. まずGoogle Map API V3で使用するAPIキーを取得します。
    取得に関してはこちらのドキュメントを参照ください。
    APIキー取得
     
  2. Google Map API V3を使い、地図を表示します。
    Google Developersにサンプルコードが載っていますので、地図表示に関してはこちらを参照ください。
    サンプルコード
     

    <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キーを指定します。
    sensorに、GPSなどを使って位置情報を取得するかしないかを指定します。今回は、Geolocationで位置情報を取得しますので、falseを指定します。
     

  3. 次に下記のスクリプトを追加します。

    まず「onload="start_func()" 」で、ページの読み込み終了後にstart_func()をキックします。
    ポイントはGeolocationの位置取得が非同期通信で取得しますので、位置情報が取得できたら次のコードを読み込ませるために、「successCallback」にGoogle Mapの読み込みをする関数を入れています。

    その後のコードは、Javascript内のコメントを参照ください。

     

    <script type="text/javascript">
    var message;
     
    // 位置情報取得
    function start_func(){
    get_location();
    }
     
    // ( 1 )位置情報を取得します。
    function get_location(){
    document.getElementById("area_name").innerHTML
    = '位置情報取得します';
    if (navigator.geolocation) {
    // 現在の位置情報取得を実施 正常に位置情報が取得できると、
    // successCallbackがコールバックされます。
    navigator.geolocation.getCurrentPosition
    (successCallback,errorCallback);
    } else {
    message = "本ブラウザではGeolocationが使えません";
    document.getElementById("area_name").innerHTML
    = message;
    }
    }
    // ( 2 )位置情報が正常に取得されたら
    function successCallback(pos) {
    var Potition_latitude = pos.coords.latitude;
    var Potition_longitude = pos.coords.longitude;
     
    // 位置情報が取得出来たらGoogle Mapを表示する
    initialize(Potition_latitude,Potition_longitude);
    }
     
    function errorCallback(error) {
    message = "位置情報が許可されていません";
    document.getElementById("area_name").innerHTML = message;
    }
     
    // ( 3 )Google Map API を使い、地図を読み込み
    function initialize(x,y) {
    document.getElementById("area_name").innerHTML
    = 'google map情報を取得中';
     
    // Geolocationで取得した座標を代入
    var myLatlng = new google.maps.LatLng(x,y);
    var mapOptions = {
    zoom: 17,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
    }
    // MapTypeId に、地図タイプを指定
    // HYBRID 衛星画像と主要な通りが表示されます
    // ROADMAP 通常の地図画像が表示されます
    // SATELLITE 衛生画像が表示されます。
    // TERRAIN 地形や植生などのマッピングをします。
     
    var map = new google.maps.Map
    (document.getElementById("map_canvas"), mapOptions);
     
    var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Your position"
    });
    get_area_name(myLatlng);
    }
     
    function get_area_name(latLng_now){
    // 座標から住所名を取得
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({latLng: latLng_now}, function(results, status){
    if(status == google.maps.GeocoderStatus.OK){
    document.getElementById("area_name").innerHTML
    = results[0].formatted_address+'付近にいます';
    } else {
    // エラーの場合
    }
    });
    }
    </script>
     
    <body onload="start_func()">
        <div id="map_canvas" style="width:90%; height:90%">
    位置情報を取得しています....
    </div>
        <div id="area_name"></div>
    </body>

 

以上で、現在地を地図上に表示することができます。

 

関連記事

HTML5とGoogle Map API V3を使って現在地を地図に表示する

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。