【javascript】Google MapのAPIについて調べた

No Comments

以前、Salesforceで位置情報を扱う方法を調べました。

http://www.subnetwork.jp/blog/?p=180

実際にはVisualforce上でMapを表示するという動きが必要となるため、Google Map Apiついても少しだけ調べてみました。

https://developers.google.com/maps/documentation/javascript/3.exp/reference

世の中には賢い人というのはいるもので、とても上手にまとめてあるサイトを見つけました。

https://syncer.jp/google-maps-javascript-api-matome

APIキーの取得や使用方法については省略します。

Mapを使用するにはjavascriptを読み込む必要があります。

<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}" type="text/javascript"></script>

「key」というパラメータがありますね。

「key」はgoogleから貰えるAPIキーを指定するそうです。

以前は「sensor」というパラメータが必要だったそうですが、現在は必要ないそうです。

むしろ、記述されているとwarningが返ってきます。

javascriptを読み込んだら、まずは位置情報が使用できるかを確認します。

https://developer.mozilla.org/ja/docs/WebAPI/Using_geolocation

navigatorの中にgeolocationが存在するか調べるようです。

https://developer.mozilla.org/ja/docs/JavaScript/Reference/Operators/in

function getGeolocation(){

    // geolocationは使用可能か
    if("geolocation" in navigator) {

        // 使用可

    } else {
    
        // 使用不可
    }
}

geolocationが使用可能な場合は現在地を取得することができます。

第一引数が成功時のコールバックで、第二引数が失敗時のコールバックだそうです。

第三引数は省略可能で、最大試行回数、要求待ち時間、高精度の位置情報を求めるかを指定するオブジェクトらしいです。

成功時に渡される引数から、経度・緯度が取得できるようです。

function getLocation(){

    // 位置情報を取得する
    navigator.geolocation.getCurrentPosition(
        function(position) {
            
            // 成功時の処理
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            alert('緯度:' + latitude + ' / 経度:' + longitude);
        
        },function(error) {
            
            // 失敗時の処理
            alert('エラー：' + error);
    });
}

これで位置情報を取得することができるようになりました。

位置情報だけでは場所が分からないため、次はMapを表示する方法を確認します。

Mapを表示する場所と、Mapのオプションを指定するそうです。

表示する場所は「一般的にはdiv」となっています。

また、optionの「center」と「zoom」は必須なんだとか。

function displayMap(){

    var map;
    var canvas;
    var options;
    var latlng;

    // 表示先のタグを取得する
    canvas = document.getElementById("DivName");
    // 中心の座標を設定する(緯度, 経度)
    latlng = new google.maps.LatLng(35.632896, 139.880394);
    // オプションを設定する
    options = {
        center: latlng, // 中心座標
        zoom: 15        // ズーム値
    };
    
    // canvasにMapを表示する
    map = new google.maps.Map(canvas, options);
}

座標はディズニーランドです。

取得したdivに、ディズニーランドを中心としたMapが作成されるかと思います。

google Mapでよく見るマーカーも作成することができます。

こちらもオプションを指定するタイプですね。

引数に上で作成したmapがあります。

function createMarker(map){

    var marker;
    var options;
    var latlng
    
    // マーカーの座標を作成する(緯度, 経度)
    latlng = new google.maps.LatLng(35.632896, 139.880394);
    // オプションを設定する
    options = {
        map: map,
        position: latlng
    }

    // Mapにマーカーを作成する
    marker = new google.maps.Marker(options);
}

座標から住所を取得することもできるようです。

オプションとコールバックが必要なようです。

function getArea(){

    var geocoder;
    var latlng
    var options;
    
    // 住所を取得する座標を設定する(緯度, 経度)
    latlng = new google.maps.LatLng(35.632896, 139.880394);
    // オプションを設定する
    options = {
        location: latlng
    }

    // 座標と住所を紐づけるオブジェクト
    geocoder = new google.maps.Geocoder();
    // 座標から住所名を取得する
    geocoder.geocode(options, function(results, status){

        // 戻り値を確認する
        if(status == google.maps.GeocoderStatus.OK){

            // 成功した場合は住所を表示する
            // resultは配列です。
            alert(results[0].formatted_address);

        } else {

            // エラーの場合
            alert('住所の取得に失敗しました。');
        }
    });
}

これらを少しずつ修正することで、現在地を中心としたMapを作成することができます。

現在地を取得し、周辺の地図を表示しています。

現在地が取得できない場合はディズニーランドの周辺を表示しています。

APIキーの部分を差し替えれば動くかと思います。

<html>
<body>



<div id="ErrorMessage" style="padding: 10px 0px;"></div>




<div id="Address" style="padding: 10px 0px;"></div>




<div id="MapCanvas" style="height: 600px;"></div>



</body>
<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}" type="text/javascript"></script>
<script>

window.onload = function(){

    // 地図を作成する
    createMap();
}

// 現在地を中心とした地図を表示する
function createMap(){

    var canvas;
    var map;
    var marker;
    var latlng;
    
    // 表示するタグを取得する
    canvas = document.getElementById("MapCanvas");
    // 位置情報の初期値を設定する
    latlng = new google.maps.LatLng(35.632896, 139.880394);
    // 現在地を取得できる場合は取得する
    if("geolocation" in navigator){

        // 現在地の取得を行う
        getLocation(function(nowLocation){

            // 現在地を取得できた場合、位置座標を現在地とする
            if(nowLocation != null){

                latlng = nowLocation;
            }
            
            // google mapの作成を行う
            map = displayMap(canvas, latlng);
            // マーカーを作成する
            marker = createMarker(map, latlng);
            // マーカーを作成する
            getArea(latlng);
        });

    }else{

        // google mapの作成を行う
        map = displayMap(canvas, latlng);
        // マーカーを作成する
        marker = createMarker(map, latlng);
        // マーカーを作成する
        getArea(latlng);
    }
}

// 現在地を取得する
function getLocation(func){

    var latlng;

    // 位置情報を取得する
    navigator.geolocation.getCurrentPosition(
        function(position) {
            
            // 成功時の処理
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            // 位置情報を作成する
            latlng = new google.maps.LatLng(latitude, longitude);
            // 処理を呼び出す
            func(latlng);
        
        },function(error) {
            
            // 失敗時の処理
            // 処理を呼び出す
            document.getElementById("ErrorMessage").innerHTML = error.message;
            func(latlng);
    });
}

// Mapを表示する
function displayMap(canvas, latlng){

    var map;
    var options;

    // オプションを設定する
    options = {
        center: latlng, // 中心座標
        zoom: 15        // ズーム値
    };
    
    // canvasにMapを表示する
    map = new google.maps.Map(canvas, options);
    
    return map;
}

// マーカーを作成する
function createMarker(map, latlng){

    var marker;
    var options;
    var latlng

    // オプションを設定する
    options = {
        map: map,
        position: latlng
    }

    // Mapにマーカーを作成する
    marker = new google.maps.Marker(options);
    
    return marker;
}

// 住所を表示する
function getArea(latlng){

    var geocoder;
    var options;

    // オプションを設定する
    options = {
        location: latlng
    }

    // 座標と住所を紐づけるオブジェクト
    geocoder = new google.maps.Geocoder();
    // 座標から住所名を取得する
    geocoder.geocode(options, function(results, status){

        // 戻り値を確認する
        if(status == google.maps.GeocoderStatus.OK){

            // 成功した場合は住所を表示する
            // resultは配列です。
            document.getElementById("Address").innerHTML = results[0].formatted_address;

        } else {

            // エラーの場合
            document.getElementById("Address").innerHTML = '住所の取得に失敗しました。';
        }
    });
}

</script>
</html>

VisualForceでも確認しないといけませんね。

No comments.

コメントを残すコメントをキャンセル

« 【Salesforce】Visualforceで地理位置情報を使用した

【Salesforce】common.api.soap.wsdl.Address used in expression: Account.BillingAddress »

下っ端の落書き帳

【javascript】Google MapのAPIについて調べた