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

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

,
JavaScript
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を読み込む必要があります。

SyntaxHighlighterについて
google map apiの読み込み
1
<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

SyntaxHighlighterについて
位置情報は使用可能か
1
2
3
4
5
6
7
8
9
10
11
12
function getGeolocation(){
 
    // geolocationは使用可能か
    if("geolocation" in navigator) {
 
        // 使用可
 
    } else {
     
        // 使用不可
    }
}

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

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

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

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

SyntaxHighlighterについて
現在地を取得する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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」は必須なんだとか。

SyntaxHighlighterについて
基本的なMapを表示する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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があります。

SyntaxHighlighterについて
マーカーの作成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);
}

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

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

SyntaxHighlighterについて
住所の表示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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キーの部分を差し替えれば動くかと思います。

SyntaxHighlighterについて
周辺の地図を表示する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<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.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

«
»