หาระยะทางจากตำแหน่งปัจจุบันกับสถานที่ใน google map ด้วย Distance Matrix

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
distance matrix sort array หาระยะทาง google map clone array

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ distance matrix sort array หาระยะทาง google map clone array

ดูแล้ว 18,520 ครั้ง


เนื้อหาต่อไปนี้ เป็นแนวทางการประยุกต์ใช้งาน Google map Distance Matrix API
ในการหาระยะทางระหว่างตำแหน่งเริ่มต้น กับตำแหน่งสิ้นสุด โดยในที่นี้จะให้ตำแหน่ง
เริ่มต้น เป็นตำแหน่งปัจจุบันของผู้ใช้งาน ตรวจสอบจากตำแหน่ง GPS อ้างอิงจากบทความ
ในหัวข้อ
    ใช้ gps ระบุตำแหน่ง และอัพเดท ตำแหน่งอัตโนมัติ ใน google map http://niik.in/563 
 
จำไว้เสมอว่า การระบุตำแหน่งปัจจุบันผ่าน google map นั้น เว็บไซต์ของเราหรือ url ที่เรียกใช้งาน
จะต้องเป็น https หรือเป็นระบบ ssl เท่านั้น ค่าตำแหน่งจึงจะแสดง 
อีกส่วนที่สำคัญ คือการใช้งาน API key ในการใช้งาน google map ควรจะใช้และจำเป็นต้องใช้งาน API Key
อย่างกรณีที่เราจะใช้งาน Distance Matrix API จำเป็นต้องใช้งาน API Key ด้วย ดูเนื้อหาบทความด้านล่าง
นี้เป็นแนวทาง
    แนวทางแก้ปัญหา Google map ไม่แสดง และการใช้งาน API Key http://niik.in/783 
 
สำหรับเนื้อหาโดยละเอียดเกี่ยวกับ Distance Matrix API สามารถดูเพิ่มเติมได้ที่
    https://developers.google.com/maps/documentation/distance-matrix/intro
    https://developers.google.com/maps/documentation/distance-matrix/usage-limits
    https://developers.google.com/maps/documentation/javascript/examples/distance-matrix
 
โค้ดตัวอย่าง และการทำงานของโค้ดตัวอย่าง
    สำหรับโค้ดตัวอย่างต่อไปนี้ เราจะสมมติสถานที่ขึ้นมา 2 ที่ แสดงด้วย marker A B และกำหนดจุดของ
ผู้ใช้งานเป็นไอคอนรูปคน โดยตำแหน่งของผู้ใช้จะอิงจากตำแหน่งของ GPS ถ้าเปิดผ่านบราวเซอร์ จะมีการ
แจ้งขอสิทธิ์การระบุตำแหน่ง เราควรอนุญาตให้ใช้ตำแหน่ง เพื่อให้การทำงานเป็นไปอย่างถูกต้อง โดยระบบ
GPS ผ่านการใช้งานบราวเซอร์ จะอ้างอิงถึงตำแหน่งของสัญญาณอินเทอร์เน็ต หรือไวไฟ
    ตำแหน่งของผู้ใช้ในโค้ดตัวอย่าง ถ้าตำแหน่งจริง ไม่ได้อยู่ใน กทม ให้คลิกที่ไอคอนลากมาที่ กทม เพื่อให้
เห็นภาพชัดเจนขึ้น ใต้รูปแผนที่ จะมีตารางแสดงสถานที่ และระยะห่างของสถานที่นั้น กับตำแหน่งปัจจุบันของเรา
เราสามารถ ทดสอบย้ายไอคอนรูปคน และดูการเปลี่ยนแปลงของระยะทาง โดยระยะทางในตัวอย่าง จะ
เป็นในโหมดของ การขับรถ ดังนั้นมีโอกาสเป็นไปได้ที่แม้เราลากตำแหน่งไอคอนมาใกล้กับสถานที่ เพื่อทดสอบ
ระยะทาง แต่ระยะทางยังไกล หรือเป็นระยะทางที่คล้ายกับการขับรถอ้อมไปตามเส้นทาง ดังนั้น การวางตำแหน่ง
ของไอคอน ในตำแหน่งที่เหมาะสม จะได้ข้อมูลที่ใกล้เคียง
 
ไฟล์ตัวอย่าง google_map_distance_matrix.php
 
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="//unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
  
 <style type="text/css"
#map_canvas {  
    width:550px; 
    height:500px; 
    margin:auto; 
    /*  margin-top:100px;*/ 
</style> 
  
<br>
<br>
<div class="container" style="width:800px;">
 
<div id="map_canvas"></div> 
<table class="table table-condensed" style="width:550px;margin:auto;">
    <thead>
        <tr class="active">
            <th>Place</th>
            <th>Distance</th>
        </tr>
    </thead>
    <tbody id="placeData">
 
    </tbody>
</table>
 
</div>  
</div>
  
  
  
  
<script src="//unpkg.com/jquery@3.2.1"></script>
<script type="text/javascript">
var arr_Destination = [
    {title:'Place A',lat:13.78040,lng:100.58738},
    {title:'Place B',lat:13.79157,lng:100.63922},
/*  {title:'Place C',lat:ddddd,lng:ddddd},
    {title:'Place D',lat:ddddd,lng:ddddd},
    {title:'Place E',lat:ddddd,lng:ddddd},
    {title:'Place F',lat:ddddd,lng:ddddd},*/
];
var iconLetter = ['a','b'];
var place_Marker = [];
var pos;
var posPlace;
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้ 
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น 
var my_Marker;  // กำหนดตัวแปรเก็บ marker ตำแหน่งปัจจุบัน หรือที่ระบุ 
var service;
var origins = [];
var destinations = [];
function initialize() { // ฟังก์ชันแสดงแผนที่ 
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM 
    
   service = new GGM.DistanceMatrixService();
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี   
    if(navigator.geolocation){   
              
            // หาตำแหน่งปัจจุบันโดยใช้ getCurrentPosition เรียกตำแหน่งครั้งแรกครั้งเดียวเมื่อเปิดมาหน้าแผนที่
            navigator.geolocation.getCurrentPosition(function(position){   
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน 
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน          
                  
                // สรัาง LatLng ตำแหน่ง สำหรับ google map 
                pos = new GGM.LatLng(myPosition_lat,myPosition_lon);   
                origins = [];
                origins.push(pos);            
                  
                // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas 
                var my_DivObj=$("#map_canvas")[0];  
                  
                // กำหนด Option ของแผนที่ 
                var myOptions = { 
                    zoom: 13, // กำหนดขนาดการ zoom 
                    center: pos , // กำหนดจุดกึ่งกลาง  เป็นจุดที่เราอยู่ปัจจุบัน
                    mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่ 
                    mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่ 
                        position:GGM.ControlPosition.RIGHT, // จัดตำแหน่ง 
                        style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style  
                    
                }; 
           
                map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map                     
                
               my_Marker = new GGM.Marker({ // สร้างตัว marker 
                    position: pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง 
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map 
                    icon:"//www.ninenik.com/demo/google_map/images/male-2.png"
                    draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้ 
                    title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ 
                });                 
                  
                for( i = 0;i<arr_Destination.length;i++){   
                    var htmlTr = '<tr><td>'+arr_Destination[i].title+'</td><td class="place_distance"></td></tr>';
                    $("#placeData").append(htmlTr);
 
                    posPlace = new GGM.LatLng(arr_Destination[i].lat,arr_Destination[i].lng);    
                    destinations.push(posPlace);
 
                    place_Marker[i] = new GGM.Marker({ // สร้างตัว marker 
                        position: posPlace,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง 
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map 
                        icon:"//www.ninenik.com/iconsdata/letter_red/letter_"+iconLetter[i]+".png"
                    });        
                }      
                 
                service.getDistanceMatrix(
                  {
                    origins: origins,
                    destinations: destinations,
                    travelMode: 'DRIVING',
                    avoidHighways: true,
                    avoidTolls: true,
                  }, callback);                     
                  
                  
                // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
                GGM.event.addListener(my_Marker, 'dragend', function() {
                    var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
                    map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker          
                    origins = [];
                    origins.push(my_Point);    
                         
                    service.getDistanceMatrix(
                      {
                        origins: origins,
                        destinations: destinations,
                        travelMode: 'DRIVING',
                        avoidHighways: true,
                        avoidTolls: true,
                      }, callback);                         
 
                });    
                                  
                // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom 
                GGM.event.addListener(map, "zoom_changed", function() { 
                    $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value   
                });                 
                  
            },function() {   
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน   
            });   
          
            // ให้อัพเดทตำแหน่งในแผนที่อัตโนมัติ โดยใช้งาน watchPosition
            // ค่าตำแหน่งจะได้มาเมื่อมีการส่งค่าตำแหน่งที่ถูกต้องกลับมา
            navigator.geolocation.watchPosition(function(position){   
   
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน 
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน 
                                 
                // สรัาง LatLng ตำแหน่งปัจจุบัน watchPosition
                pos = new GGM.LatLng(myPosition_lat,myPosition_lon);    
                 orgins = [];
                 origins.push(pos);   
                         
                service.getDistanceMatrix(
                  {
                    origins: origins,
                    destinations: destinations,
                    travelMode: 'DRIVING',
                    avoidHighways: true,
                    avoidTolls: true,
                  }, callback);                         
                 
                // ให้ marker เลื่อนไปอยู่ตำแหน่งปัจจุบัน ตามการอัพเดทของตำแหน่งจาก watchPosition
                my_Marker.setPosition(pos);
 
                map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน 
                map.setCenter(pos);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน                  
        
  
            },function() {   
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน   
            });   
            
    }else{   
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง   
    }    
  
  
   
function callback(response, status) {
    if(status=='OK'){      
        console.log(response.rows);
        $.each(response.rows[0].elements,function(i,elm){
            console.log(i);
            console.log(elm);
            $(".place_distance:eq("+i+")").text(elm.distance.text);
        });
    }
}
$(function(){ 
    // โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว 
    // ค่าตัวแปร ที่ส่งไปในไฟล์ google map api 
    // v=3.2&sensor=false&language=th&callback=initialize 
    //  v เวอร์ชัน่ 3.2 
    //  sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false 
    //  language ภาษา th ,en เป็นต้น 
    //  callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize 
    $("<script/>", { 
      "type": "text/javascript"
      src: "//maps.google.com/maps/api/js?v=3.2&key=<ใส่ api key ของเรา>&sensor=false&language=th&callback=initialize"
    }).appendTo("body");     
});
 </script>
</body>
</html>
 
ดูตัวอย่างผลลัพธ์ที่ demo ด้านล่าง
 
 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 12-11-2017


เพิ่มตัวอย่างโค้ดการจัดเรียงของตำแหน่งที่ใกล้เคียง จากระยะทางน้อยไปมาก

 
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="//unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
  
 <style type="text/css"
#map_canvas {  
    width:550px; 
    height:500px; 
    margin:auto; 
    /*  margin-top:100px;*/ 
</style> 
  
<br>
<div class="container" style="width:800px;">
 
<div id="map_canvas"></div> 
<table class="table table-condensed" style="width:550px;margin:auto;">
    <thead>
        <tr class="active">
            <th>Place</th>
            <th>Distance</th>
        </tr>
    </thead>
    <tbody id="placeData">
 
    </tbody>
</table>
 
</div>  
</div>
  
  
  
  
<script src="//unpkg.com/jquery@3.2.1"></script>
<script type="text/javascript">
var arr_Destination = [
    {id:1,title:'Place A',lat:13.78040,lng:100.58738},
    {id:2,title:'Place B',lat:13.79157,lng:100.63922},
    {id:3,title:'Place C',lat:13.81907,lng:100.57674},
    {id:4,title:'Place D',lat:13.77139,lng:100.66669},
/*  {title:'Place E',lat:ddddd,lng:ddddd},
    {title:'Place F',lat:ddddd,lng:ddddd},*/
];
var sort_arr_Destination = [];
var iconLetter = ['a','b','c','d'];
var place_Marker = [];
var pos;
var posPlace;
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้ 
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น 
var my_Marker;  // กำหนดตัวแปรเก็บ marker ตำแหน่งปัจจุบัน หรือที่ระบุ 
var service;
var origins = [];
var destinations = [];
function initialize() { // ฟังก์ชันแสดงแผนที่ 
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM 
    
   service = new GGM.DistanceMatrixService();
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี   
    if(navigator.geolocation){   
              
            // หาตำแหน่งปัจจุบันโดยใช้ getCurrentPosition เรียกตำแหน่งครั้งแรกครั้งเดียวเมื่อเปิดมาหน้าแผนที่
            navigator.geolocation.getCurrentPosition(function(position){   
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน 
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน          
                  
                // สรัาง LatLng ตำแหน่ง สำหรับ google map 
                pos = new GGM.LatLng(myPosition_lat,myPosition_lon);   
                origins = [];
                origins.push(pos);            
                  
                // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas 
                var my_DivObj=$("#map_canvas")[0];  
                  
                // กำหนด Option ของแผนที่ 
                var myOptions = { 
                    zoom: 12, // กำหนดขนาดการ zoom 
                    center: pos , // กำหนดจุดกึ่งกลาง  เป็นจุดที่เราอยู่ปัจจุบัน
                    mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่ 
                    mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่ 
                        position:GGM.ControlPosition.RIGHT, // จัดตำแหน่ง 
                        style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style  
                    
                }; 
           
                map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map                     
                
               my_Marker = new GGM.Marker({ // สร้างตัว marker 
                    position: pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง 
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map 
                    icon:"//www.ninenik.com/demo/google_map/images/male-2.png"
                    draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้ 
                    title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ 
                });                 
                  
                for( i = 0;i<arr_Destination.length;i++){   
                    posPlace = new GGM.LatLng(arr_Destination[i].lat,arr_Destination[i].lng);    
                    destinations.push(posPlace);
 
                    place_Marker[i] = new GGM.Marker({ // สร้างตัว marker 
                        position: posPlace,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง 
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map 
                        icon:"//www.ninenik.com/iconsdata/letter_red/letter_"+iconLetter[i]+".png"
                    });        
                }      
                 
                service.getDistanceMatrix(
                  {
                    origins: origins,
                    destinations: destinations,
                    travelMode: 'DRIVING',
                    avoidHighways: true,
                    avoidTolls: true,
                  }, callback);                     
                  
                  
                // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
                GGM.event.addListener(my_Marker, 'dragend', function() {
                    var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
                    map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker          
                    origins = [];
                    origins.push(my_Point);    
                         
                    service.getDistanceMatrix(
                      {
                        origins: origins,
                        destinations: destinations,
                        travelMode: 'DRIVING',
                        avoidHighways: true,
                        avoidTolls: true,
                      }, callback);                         
 
                });    
                                  
                // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom 
                GGM.event.addListener(map, "zoom_changed", function() { 
                    $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value   
                });                 
                  
            },function() {   
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน   
            });   
          
            // ให้อัพเดทตำแหน่งในแผนที่อัตโนมัติ โดยใช้งาน watchPosition
            // ค่าตำแหน่งจะได้มาเมื่อมีการส่งค่าตำแหน่งที่ถูกต้องกลับมา
            navigator.geolocation.watchPosition(function(position){   
   
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน 
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน 
                                 
                // สรัาง LatLng ตำแหน่งปัจจุบัน watchPosition
                pos = new GGM.LatLng(myPosition_lat,myPosition_lon);    
                 orgins = [];
                 origins.push(pos);   
                // ให้ marker เลื่อนไปอยู่ตำแหน่งปัจจุบัน ตามการอัพเดทของตำแหน่งจาก watchPosition
                my_Marker.setPosition(pos);
 
                map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน 
                map.setCenter(pos);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน                  
        
  
            },function() {   
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน   
            });   
            
    }else{   
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง   
    }    
  
  
   
 
function callback(response, status,_) {
    if(status=='OK'){      
//      console.log(arr_Destination);
        $.each(response.rows[0].elements,function(i,elm){
            arr_Destination[i].distanceText = elm.distance.text;
            arr_Destination[i].distanceValue = elm.distance.value;
        });
        sort_arr_Destination = [];
        sort_arr_Destination = $.extend(true,[], arr_Destination);
        sort_arr_Destination.sort(function(a, b) {
            return parseFloat(a.distanceValue) - parseFloat(b.distanceValue);
        });
//      console.log(sort_arr_Destination);
        $("#placeData").html('');
        $.each(sort_arr_Destination,function(i,dest){
            var htmlTr = '<tr><td>'+dest.title+'</td><td>'+dest.distanceText+'</td></tr>';
            $("#placeData").append(htmlTr);        
    //      console.log(dest);
        });    
    }
}
$(function(){ 
    // โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว 
    // ค่าตัวแปร ที่ส่งไปในไฟล์ google map api 
    // v=3.2&sensor=false&language=th&callback=initialize 
    //  v เวอร์ชัน่ 3.2 
    //  sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false 
    //  language ภาษา th ,en เป็นต้น 
    //  callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize 
    $("<script/>", { 
      "type": "text/javascript"
      src: "//maps.google.com/maps/api/js?v=3.2&key=<ใส่ api key ของเรา>&sensor=false&language=th&callback=initialize"
    }).appendTo("body");     
});
 </script>
</body>
</html>
 
ดูเพิ่มเติมตัวอย่างที่ demo 2





กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ